Question

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

我尝试过使用身高：100％全部或部分身高，这总是让元素太高了。我不想要滚动条。这可以用CSS完成，还是必须使用Jquery？

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%;
}

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

Answer 2

这是正确的，盒子的高度是容器的100％，但是你也必须考虑到你有边框，并且那里的页脚也是。

所以总高度为：

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

这将强制滚动条。

Answer 3

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

第一。固定页眉，页脚和顶部和底部：jsFiddle 妥协，元素的大小是固定的，因此设计是严格的，而不是内容驱动的。可以在未来更加努力，因为一切都是绝对的。

第二。百分比比例：jsFiddle 妥协，一切都在扩展 - 不仅仅是内容领域。这意味着屏幕越大，页眉和页脚越大。

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

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

如果您需要限制页眉和页脚太大，我建议您将第二选项视为最灵活的选项并实现最小和最大高度。（jsFiddle）

Answer 4

这是有效的：
基于像素的页眉和页脚以及基于百分比的内容 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>

如何使兄弟div动态填充父级？

4 个答案: