2

我基本上有一些兄弟 div、页眉、内容、页脚。我希望内容在调整窗口大小时动态填充页眉和页脚留下的父级空间。

我尝试在全部或部分上使用 height:100% ，这总是使元素太高。我不想要滚动条。这可以只用 CSS 完成还是我必须使用 Jquery？

http://jsfiddle.net/2fnA7/

HTML

<html class="fill">
    <body class="fill">
        <div>header</div>
        <div class="content">content</div>
        <div>footer</div>
    </body>
</html>

CSS

.fill
{
    height:100%;
}
.content
{
    height:100%;
}
4

4 回答 4

1

如果您有固定的页眉和页脚高度，您可以通过在内容 div 上设置顶部和底部来做到这一点，即

<style type="text/css">
html, body{width: 100%; height: 100%; margin: 0; padding: 0}
.header{position: absolute; top: 0; width: 100%; height: 100px; background: #888}
.content{position: absolute; width: 100%; top: 100px; bottom: 100px}
.footer{position: absolute; bottom: 0; width: 100%; height: 100px; background: #888}
</style>
于 2012-09-19T15:40:05.197 回答
0

没错，盒子的高度是容器的 100%，但是你还必须考虑到你有边框，还有页脚。

所以总高度是：

容器高度 + 边框总和 + 页脚高度。

这将强制滚动条。

于 2012-09-19T15:35:18.130 回答
0

有很多方法可以模拟这种效果，每种方法都有折衷。

第一个。固定页眉、页脚和设置顶部和底部：jsFiddle 妥协，元素大小固定，设计是刚性的，因此不是内容驱动的。可以在未来更难地弥补，因为一切都是绝对定位的。

第二。百分比：jsFiddle 妥协，一切都可以缩放 - 不仅仅是内容区域。这意味着屏幕越大，页眉和页脚就越大。

第三。混合搭配，修复固定的东西，让需要灵活的东西灵活：jsFiddle 妥协，虽然更灵活，但它涉及隐藏可能难以管理的内容。

您绝不想使用这些方法中的任何一种。查看您的内容并混合使用可为您的内容提供最大空间和最佳外观的方法。随着时间的推移， CSS 属性calc()将使这变得更容易，但浏览器需要先到达那里。

如果您需要限制页眉和页脚变得太大，我建议您将选项二视为最灵活的并实施最小和最大高度。( jsFiddle )

于 2012-09-19T16:10:11.853 回答
0

这是有效的：
基于像素的页眉和页脚以及基于百分比的内容。
page.html

<style>
.header
{
    background-color:#222;
    padding:5px;
    position: absolute;
    top: 0px;
    left:0px;
    right:0px;
    height:100px;
}
.content
{
    background-color:#CCC;
    padding:5px;
    position: absolute;
    top: 100px;
    bottom: 50px;
    left:0px;
    right:0px;
}
.footer
{
    position:absolute;
    bottom: 0px;
    border:1px;
    height:50px;
    background-color:#09F;
    left:0px;
    right:0px;
}

</style>
<div class="header">1</div>
<div class="content">2</div>
<div class="footer">3</div>
于 2012-09-19T16:37:07.293 回答