将div高度设置为窗口高度

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

我也使用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%; 
}

screenshot

编辑对不起，我发布了一个老版本的小提琴，这是更新的一个。注意黄色边框溢出容器。 http://jsfiddle.net/ob1g0752/4/

来源

2014-12-30 Ronen Festinger

添加高度：100％你的身体选择。 – Slime

对不起，小提琴不是最新的，请参阅我的编辑http://jsfiddle.net/ob1g0752/4/。 –

删除边距和填充将有所帮助，您还可以在设置宽度时添加box-sizing: border-box;来计算边框和填充。另外我不知道，如果你想使你的页脚粘到页面的底部，但我确实是在这个捣鼓的其他修复一起：

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

来源

2014-12-30 21:10:30

对不起，小提琴是不是最新的，看到我的编辑jsfiddle.net/ob1g0752/4 –

好是的，边界会溢出，高度是100％，它低于另一个元素，所以溢出将等于它下面的元素。如果你不能编辑'height'，你可以设置'position：absolute'和'top：0'。请确保您还添加'位置：如果你要的内容显示前一个元素下面20px'的黄色边框的元素：relative'父元素，并添加'填充顶。使填充等于粉红色边框元素的高度。小提琴：http://jsfiddle.net/ob1g0752/5/ –

的问题是上面可以显示或不显示div和在两种情况下我想底部的div将容器的剩余空间。同样在你的小提琴中，底部容器顶部边框与顶部边框重叠并且不在其下面。 –

您需要

margin: 0px; 
padding: 0px;

添加到html和body。

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

来源

2014-12-30 19:54:55 Kylos

对不起，小提琴是不是最新的，看到我的编辑http://jsfiddle.net/ob1g0752/4 –

将div高度设置为窗口高度

回答

相关问题