我有 3 个
<div id="header"></div>
<div id="content" style="height:900px;width:1400px; "></div>
<div id="footer"></div>
我需要保持中心 DIV 的规定确切大小,我需要“页眉”和“页脚”来均匀填充顶部和底部的空间(从“内容”高度剩余),因此所有三个 DIV 都将占据精确窗口高度。
此外,我希望页眉和页脚设置了一些最小高度(因此,如果屏幕变得太小,这些 DIV 将保持一定高度,继续显示其内容,并出现滚动条)。
我可能会在 JS 中做 int,但 CSS 必须是可能的。提前致谢!
最佳答案
您可以使用以下 javascript 代码在带有 jQuery 的 JS 中很容易地做到这一点:
var spaceHeight = $(window).height()-$("#content").height();
$("#header, #footer").css('height', spaceHeight/2);
您应该将该代码放在某个地方,以确保在布局发生变化时调用它,或者在 $(document).ready() 页面布局将是静态的情况下调用它。
并且为了保留 #footer
和 #header
的最小高度,请使用 CSS 中的 min-height 属性。
关于css - 使 DIV 匹配浏览器高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16501263/