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，我也把它搞定了。这很接近吗？

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

这可能会对你有帮助。

在不使用JavaScript和绝对定位的情况下使DIV填充页面的其余部分？

2 个答案: