将div高度设置为窗口高度

Question

我正在使用ASP.NET模板并尝试将我的内容设置为占据窗口的全部高度，但我无法实现它。我里面有一个容器和两个兄弟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

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

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

Answer 2

您需要添加

margin: 0px;
padding: 0px;

到html和body。

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