使DIV匹配瀏覽器高度

我有3 < div>元素堆疊在屏幕上彼此的頂部。使DIV匹配瀏覽器高度

<div id="header"></div> 
    <div id="content" style="height:900px;width:1400px; "></div> 
    <div id="footer"></div>

我需要保持中央DIV的規定確切的大小，我需要「頭」和「尾」到頂部和底部填充空間（從「內容」高度剩餘）同樣，所以所有三個DIV將佔據確切的窗口高度。

另外，我希望頁眉和頁腳設置了一些最小高度（因此，如果屏幕變得太小，這些DIV會保持一定的高度，不斷顯示其內容，並出現滾動條）。

我可以在JS中做int，但CSS必須是可能的。提前致謝！

來源

2013-05-11 Askar Ibragimov

使用'高度：100％'的所有三個div的和'民height'的爲準divs你需要它爲 – adaam 2013-05-11 20:09:24

@adaam，每個div成爲100％，所以我現在有他們佔據300％的窗口，這不是我所需要的 – 2013-05-11 20:24:25

您可以使用jQuery使用下面的JavaScript代碼很容易做到這一點的JS：

var spaceHeight = $(window).height()-$("#content").height(); 
$("#header, #footer").css('height', spaceHeight/2);

你應該把這些代碼的地方在那裏你會確保它調用的情況下，佈局變化或$（文檔）.ready（）如果頁面佈局將是靜態的。

並且爲了保留#footer和#header的最小高度，請在CSS中使用最小高度屬性。

這裏和示例：http://jsfiddle.net/4h5f8/17/

來源

2013-05-11 20:35:29 nethopp3r

非常感謝！我自己也得出結論：JS是直接控制這些高度的最好方法，因爲我希望它們平等。我在onload和onResize上發佈了這段代碼，這幾乎總結了可能的用法。有一件事我沒有得到，有時spaceHeight + content.height！=窗口高度（是的，經過精確的計算！），差異是0到幾個像素，隨着調整大小而改變。我想知道是什麼原因造成的 – 2013-05-12 00:01:25

試試這個代碼，看看它是否是你所需要的：

<html> 
<head> 
<style> 
#header { 
    min-height:50px; 
    height:10%; 
    background-color:grey; 
} 
#content { 
    height:80%; 
    background-color:#EEEEEE; 
} 
#footer { 
    min-height:50px; 
    height:10%; 
    background-color:grey; 
} 
</style> 
</head> 
<body> 

<div id="header"></div> 
<div id="content"></div> 
<div id="footer"></div> 

</body> 
</html>

來源

2013-05-11 22:06:26 Matthew

爲了做到這一點，請添加一個文檔類型，並添加'html，body {height：100％}' – Rob 2013-05-11 22:12:21

使DIV匹配瀏覽器高度

回答

相關問題