2

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%.

Mike Perrenoud
  • 66,820
  • 29
  • 157
  • 232

2 Answers2

1

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;
}
Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
0

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

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

This might help you.

sentil kumar
  • 97
  • 2
  • 7