使块元素垂直填充容器而无需手动固定大小答案

【问题标题】：Make a block element fill container vertically without manually fixing size使块元素垂直填充容器而无需手动固定大小
【发布时间】：2012-05-18 11:34:32
【问题描述】：

我有一个固定大小的外部元素，其下方有一个页脚。元素内部有两个部分；第一个应该是固定高度，第二个应该扩展以填充另一个元素但不溢出它。

Let me show you.

我该怎么做？在第二个元素上设置height: 100% 会导致它溢出外部元素并超出页脚。我看到的唯一另一种选择是以像素为单位明确设置高度，这看起来会很混乱。

这样做的正确方法是什么？

编辑： 设置 overflow-y: hidden 将在这个非常有限的示例中起作用，但它实际上并没有限制 section.inner2 并且如果例如我想给出会看起来很奇怪section.inner2 边界半径

【问题讨论】：

这就是所谓的粘性页脚。谷歌这个词并试用代码。
@Blender 谢谢，我不知道这个词。但是我不希望页脚粘在页面底部，而不是固定大小元素的底部。
也不例外。用选择器替换body，效果完全一样。
@Blender 很抱歉，但这似乎不是真的。这是推荐的设置：dabblet.com/gist/2722962 注意问题是灰色 section.s2 没有扩展以填充其垂直轴上的容器。这是我用 div.body 替换 body 的最佳尝试：dabblet.com/gist/2722962 同样的问题仍然存在。

标签： html css height

【解决方案1】：

我能想到的最简单的解决方案（我想的不多）就是使用position: absolute;:http://jsfiddle.net/WLZmT/3/。

HTML：

<div id="outer">
    <div id="fixed">
        Fixed.
    </div>
    <div id="fluid">
        Fluid.
    </div>
</div>

CSS：

#outer {
    position: relative;
    background: rgb(255, 200, 200);
    padding: 10px;

    height: 400px;
}

#fixed {
    height: 100px;
    padding: 10px;

    background: rgb(200, 255, 200);
}

#fluid {
    padding: 10px;
    background: rgb(200, 200, 255);

    position: absolute;
    top: 100px;
    bottom: 10px;
    left: 10px;
    right: 10px;
}

【讨论】：

哈哈，这是一些疯狂的废话，但它实际上可能对我有用。

【解决方案2】：

喜欢这样吗？

<!DOCTYPE HTML>
<html>
<head>

    <title></title>


    <style media="screen" type="text/css">
    html,
    body {
        margin:0;
        padding:0;
        height:100%;
    }
    #container {
        left:50%;
        min-height:100%;
        position:relative;
    }
    #header {
        background:#ff0;
        padding:10px;
    }
    #body {
        padding:10px;
        padding-bottom:60px; /* Height footer */
    }
    #footer {
        position:absolute;
        bottom:0;
        width:100%;
        height:60px;            /* Height of the footer */
        background:#6cf;
    }


    </style>
    <!--[if lt IE 7]>
    <style media="screen" type="text/css">
    #container {
        height:100%;
    }
    </style>
    <![endif]-->
</head>
<body>

<div id="container">
    <div id="header">
        head
        <!-- Header end -->
    </div>
    <div id="body">
        <!-- Body start -->

        <!-- Body end -->
    </div>
    <div id="footer">
        <!-- Footer start -->
footer
        <!-- Footer end -->
    </div>
</div>


</body>
</html>

【讨论】：

不，就像我发布的示例一样。我不想将页脚粘贴到页面底部，而是希望它在固定大小的容器之后流动，但我希望该容器中的元素填充它。
什么意思？这是一件简单的事情。使元素垂直扩展到其容器的边界，但不超出它。请问我的例子有什么不清楚的地方。我很乐意把它清理干净。
我有点困惑，因为您的示例与我的答案相同。区别在哪里？
不是。同样，#body 必须有一个最小高度和两个块元素，第二个元素一直填充到 body 的底部。考虑一下页面主体具有 minHeight（在我的示例中为 400px）并由选项卡系统组成的用例。所以选项卡区域的大小是固定的，但它的其余部分应该流到它的容器底部。
很抱歉，这太复杂了，我无法理解。