2

是否有可能在没有 JavaScript 和绝对定位的情况下让这个 DIV 填充页面的其余部分？

<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% 加上其上方内容的高度。当我设置positiontorelative和bottomto 时0，它只是使其成为内容的高度。我也不认为这很令人惊讶，因为我认为bottom仅用于absolute定位。当我将标题内容包装在 a 中div并将其设置height为20%然后将contentdiv设置height为80%它最终呈现很像将contentdiv设置height为80%。

4

2 回答 2

1

我冒昧地创建了一个我认为你的意思的 JSFiddle，我也 html5'd 了它。这很近吗？

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;
}
于 2013-04-16T03:02:24.963 回答
0

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

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

这可能会帮助你。

于 2013-04-16T02:26:22.650 回答