CODEWITHSUNDEEP
htmlcss
Mike Perrenoud
Mike Perrenoud

Reputation: 67898

Making a DIV fill the remainder of the page without JavaScript and absolute positioning?

Is it possible to get this DIV to fill the remainder of the page without JavaScript and absolute positioning?

<html>
    <head>
        <title>Hello World</title>
        <style>
            body { margin: 0; }
            #title_image { float: left; margin: 1em; }
            #title { float: left; margin: 1em; }
            #content { background-color: #808277; clear: both; color: #FEFDDE; }
        </style>
    </head>

    <body>
        <img id="title_image" src="helloworld_small.jpg" />
        <div id="title">
            <h1>Hello World</h1>
            <h3>Home of the Hello World site!</h3>
        </div>
        <div id="content">
            Hello World
        </div>
    </body>
</html>

When I set the height to 100% it's a tidge taller than the viewport. I don't guess that's all that surprising because it's filling 100% plus the height of the content above it. When I set the position to relative and the bottom to 0 that just makes it the height of the content. I don't guess that's all that surprising either because I think the bottom is only used in absolute positioning. When I wrap the header content in a div and make set its height to 20% and then set the content div's height to 80% it ends up rendering a lot like just setting the content div's height to 80%.

Upvotes: 2

Views: 189

Answers (2)

Jason Lydon
Jason Lydon

Reputation: 7180

I took the liberty of creating a JSFiddle of what I think you meant, I also html5'd it up. Is this close?

JSFiddle

* {
    margin:0;
    padding:0;
}
html, body {
    height:100%;
}
hgroup {
    padding:2% 1em;
    background:#0f0;
    height:20%;
    display:block;    
}
article {
    background-color:#808277;
    color:#FEFDDE;
    height:72%;
    padding:2% 1em;
    display:block;
}

Upvotes: 1

sentil kumar
sentil kumar

Reputation: 95

Try to have a look in this website for better understanding.

http://www.w3schools.com/html/html_layout.asp

This might help you.

Upvotes: 0

Related Questions