如何讓div填充剩餘空間？

-2

頁眉
自動調整大小DIV
頁腳。

頁眉和頁腳具有固定的像素大小。

<div id="header"> 
Lorem Ipsum 
</div> 

<div id="auto"> 
This div should automatically change size 
</div> 

</div id="footer"> 
Lorem Ipsum 
</div>

而CSS

document,body { 
width:100%; 
height:100%; 
} 
#header { 
width:100%; 
height:50px; 
} 
#auto { 
height:100% (it fills 100% of the window height instead the remaining) 
} 
#footer { 
width:100%; 
height:50px; 
}

如何讓我的div填充剩餘的空間？

來源

2014-04-18 123321123321

不知道你問什麼，你能成爲更清晰？ –

如果我正確理解你，你是否希望頁腳始終堅持頁面的底部？ –

如果你不想得到低估和標記，你真的需要更加努力地解決這個問題。你試過的代碼？錯誤？的jsfiddle？任何東西... – celeriko

有很多方法可以做到這一點，但我自己用的一個棘手的註腳。

CSS-Tricks
StickyFooter

我建議你創建一個包含了header，main和footer容器div元素，並將與width:100%; height:100% min-height:???;

來源

2014-04-18 14:52:08 dayuloli

你可以通過使用jQuery獲取窗口高度來解決它，並獲取窗口高度的頁眉和頁腳的高度，並將其設置在你的div上。

像這樣：

header { 
    background: red; 
    height: 10px; 
    position: fixed; 
    top: 0; 
    width:100%; 
} 

.resizable { 
    background: blue; 
    width: 100%; 
} 

footer { 
    background: red; 
    bottom: 0;  
    height: 10px; 
    position: fixed; 
    width:100%; 
}

這是jQuery的：

$(document).ready(function(){ 

    var newHeight = $(window).height() - 20; 

    $(".resizable").css("height", newHeight); 

});

Working JSFiddle

來源

2014-04-18 14:51:57

很好的努力，但你調用resizable的元素實際上不能調整大小。您是否嘗試調整頁面大小？ :) –

這是真的，但如果你調整大小後重新加載頁面應該工作正常。這不是最好的解決方案，但現在只有我能想到:) –

那麼如果你把它放在'$（window）.resize'函數中，那也行，但我不認爲OP想要一個jQuery解決方案。 –

如何讓div填充剩餘空間？

回答

相關問題