將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高度設置爲窗口高度

回答

相關問題