将 div 高度设置为窗口高度

Question

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

我也在使用 Bootstrap。

我只能将它的高度百分比降低到更低的值，但没有更好的方法吗？ 我添加了一个屏幕截图和一个小提琴： 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%;
}

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

Answer 1

你需要添加

margin: 0px;
padding: 0px;

致html和body。

此外，您的div 具有 2 像素边框和 100% 宽度。这会强制水平滚动条。

Answer 2

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

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