使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匹配浏览器高度

回答

相关问题