Question

我遇到的麻烦是我有以下结构化代码。基本上我希望UL占据页面的前37个像素，然后跟随它的div占据浏览器窗口的剩余区域。

因此，如果我调整窗口大小并使其更高，div的紫色背景应该填满整个底部区域。我遇到的问题是，如果我在紫色DIV上将高度设置为100％，它会创建一个滚动条，因为它会将DIV创建为父级的100％，而不是剩余的100％<在考虑到UL之后的/ em>区域。

<body style="padding:0; margin:0;border-width:1px;border-color:Gray; border-style:dashed; position:absolute; left:0px; right:0px; top:0px; bottom:0px;"> <div style="margin:0; padding:0; left:0px; right:0px; top:0px; bottom:0px;margin:0;height: 100%;border-width:1px;border-color:Green; border-style:dashed;"> <div style="margin:0; padding:0; height:100%;border-width:1px;border-color:Red; border-style:dashed;"> <ul style="padding:0;margin:0;border-width:1px;border-color:Blue; border-style:solid; left:0px; right:0px; top:0px; bottom:0px;"> <li >Test Item</li> </ul> <div style="height:100%;background-color:Purple;">Test Content</div> </div> </div>

编辑：我应该注意到我正在使用最新版本的Chrome进行测试，但我在IE9和最新版本的Firefox中看到了相同的行为。

Answer 1

我认为你应该用div包装它们。实施例

<div id="wrapper" style="height: 100%;position:relative;">
<ul>
    <li >Test Item</li>
</ul>

<div style="height:100%;position: absolute; left:0; top:0;padding-top: 39px; z-index: -1">Test Content</div>
</div>

Answer 2

你可以用绝对定位

来做

示例：http://jsfiddle.net/HerrSerker/zXV7V/

<div class="wrap">
    <div class="top">Top</div>
    <div class="content">Content</div>
</div>

html,body {
    height: 100%;
}
.wrap {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.wrap .top {
    position: absolute;
    top: 0px;
    height: 37px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid gray;
}
.wrap .content {
    position: absolute;
    top:37px;
    bottom: 0px;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid black;

}

如何设置DIV以在其父容器中使用100％的剩余空间？

2 个答案: