使DIV填充页面的其余部分而无需JavaScript和绝对定位？

Question

是否有可能获得此DIV来填充页面的其余部分而无需JavaScript和绝对定位？

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

当我将height设置为100%它比视口高一点。 我不觉得这那么令人惊讶，因为它填满了100％加上上面内容的高度。 当我将position设置为relative ， bottom为0 ，仅使其成为内容的高度。 我认为这也不是那么令人惊讶，因为我认为bottom仅用于absolute定位。 当我将标头内容包装到div并将其height设置为20% ，然后将content div的height为80% ，最终呈现出的效果就像将content div的height为80% 。

Answer 1

我自由地创建了我认为您想要的JSFiddle，我也对其进行了html5处理。 这近吗？

的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;
}

Answer 2

尝试看看这个网站以获得更好的理解。

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

这可能对您有帮助。