html - 设置div高度为窗口高度

Question

我正在使用 ASP.NET 模板并尝试将我的内容设置为占据窗口的整个高度，但我无法实现。我有一个容器和里面的 2 个兄弟 div。将底部 div 设置为高度 100% 会导致它溢出容器。

我也在用 Bootstrap。

我只能降低它的高度百分比来降低值，但是没有更好的方法吗？我添加了一个屏幕截图和一个 fiddle : http://jsfiddle.net/ob1g0752/

HTML:

<div style="height:100%; width:100%; border-style:solid; border-width:2px; position:absolute;">
<div style="margin:5px; width:100%; border-style:solid; border-width:2px; border-color:pink;">
    test
</div>
<div style="height:100%;width:100%; border-style:solid; border-width:2px; margin:5px; border-color:yellow;">
    test
</div>
 </div>
 <footer style="display:block;">footer</footer>

CSS:

body
{
    min-height:100%;
    min-width:100%;
}
html
{
    height:100%;
}

编辑抱歉，我发布了旧版本的 fiddle ，这是更新后的版本。观察黄色边框溢出容器。 http://jsfiddle.net/ob1g0752/4/

Answer 1

移除边距和填充会有所帮助，您还可以添加 box-sizing: border-box; 以在设置宽度时考虑边框和填充。另外我不确定你是否想让你的页脚贴在页面底部，但我在这个 fiddle 中做了其他修复:

http://jsfiddle.net/ob1g0752/2/