Question

我有3＆lt; div>元素在屏幕上堆叠在一起。

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

我需要保持中央DIV的确切大小，我需要'标题'和'页脚'来填充顶部和底部的空间（从'内容'高度保留），所以所有三个DIV都会占用精确的窗户高度。

此外，我还希望页眉和页脚设置一些最小高度（因此，如果屏幕变得太小，这些DIV会保持一定高度，继续显示其内容，并显示滚动条）。

我可以在JS中使用int，但CSS必须是可能的。提前谢谢！

Answer 1

使用以下javascript代码，您可以使用jQuery在JS中轻松完成：

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

如果页面布局发生变化，您应该将该代码放在要确保调用它的地方;如果页面布局是静态的，则应将其放在$（document）.ready（）中。

为了保留#footer和#header的最小高度，请使用CSS中的min-height属性。

以下是示例：http://jsfiddle.net/4h5f8/17/

Answer 2

尝试使用此代码，看看它是否符合您的要求：

<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>

使DIV与浏览器高度相匹配

2 个答案: