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

【问题标题】：How to make sibling div dynamically fill parent?如何使兄弟 div 动态填充父级？
【发布时间】：2012-09-11 22:39:58
【问题描述】：

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

我尝试在所有或部分元素上使用 height: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%;
}

【问题讨论】：

例如将 100% 分成 3 部分。页眉 20% 页脚 20% 和内容 60%。
@Siamak.A.M 我只希望内容是动态的，而不是页眉和页脚。
查看我的回答 :) 希望对您有所帮助

标签： html css layout height

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

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

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

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

【讨论】：

【解决方案3】：

如果您有固定的页眉和页脚高度，您可以通过在内容 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>

【讨论】：

这不是你想要的布局吗？也许您没有将 html 更改为这些类？ jsfiddle.net/W5k7r/1
哦，对不起，不。这看起来很不错！我会尝试整合它。

【解决方案4】：

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

所以总高度是：

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

这将强制滚动条。

【讨论】：