2

我在屏幕上堆叠了 3 个 < div > 元素。

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

我需要保持中央 DIV 的确切大小，并且我需要“页眉”和“页脚”来平均填充顶部和底部的空间（剩余的“内容”高度），因此所有三个 DIV 都将占据精确的窗口高度。

另外我希望页眉和页脚设置了一些最小高度（所以如果屏幕变得太小，这些 DIV 会保持一些高度，继续显示它们的内容，并且出现滚动条）。

我可以在 JS 中做 int 但 CSS 必须是可能的。提前致谢！

4

2 回答 2

1

您可以使用以下 javascript 代码在带有 jQ​​uery 的 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/

于 2013-05-11T20:35:29.760 回答
0

试试这个代码，看看它是否是你需要的：

<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-11T22:06:26.200 回答