html - 两个堆叠的 div 和控制高度

Question

我正在尝试堆叠两个 div A 和 B。

Div A - 将是可滚动的，但它的高度需要由其下方的 div 决定，即 Div B，因此如果 Div B 中的内容发生变化，并且它的高度发生变化，Div A 的高度也会发生变化。

Div B - 需要在绝对定位的页脚顶部与页面底部对齐。它的内容需要与底部对齐。

我尝试通过将这些 div 包装在一个包装器中来使用相对位置和 float ，但是当我尝试使 Div B 对齐或绝对定位在页脚上方时，整个过程就崩溃了。

我觉得这需要回归基础，非常感谢任何帮助

谢谢

Answer 1

这是一个基本示例。我认为我已经正确理解了您的要求。这个例子让它们看起来是堆叠的，但在 HTML 中它们实际上并没有堆叠，它们是嵌套的。我不确定您是否可以在您的解决方案中允许这样做，但祈祷吧。

示例:http://jsfiddle.net/jyR2A/1/

CSS:

#divA {overflow-y:scroll;position:absolute;height:100%;top:-100%;background:green;width:100%;}
#divB {position:absolute;bottom:0;background:blue;width:100%;color:white;}

HTML:

<div id="divB">

    <!-- Div A is nested so we can use divB's height -->
    <div id="divA">
    </div>

    <!-- Div B content -->
    <div id="divBinnerContent">

        Line 1 <br />
        Line 2 <br />
        ..Keep adding more lines to test how it works <br />

    </div>

</div>

工作原理:

divB 是定义 divA 高度的父元素。因此，如果我们将 divB 位置设置为相对或绝对位置，并将 divA 放在其中，那么我们可以将 divA 的高度设置为 100% 以为其提供父元素 divB 的高度。

现在要定位 divA，我们确保它具有 position:absolute 并设置 top:-100%，这会将它向上移动与其容器 divB 的高度相同的距离。绝对位置不仅可以让我们正确定位它，还可以避免它影响其父级 divB 的高度。

divB 的内容我已经为它做了一个很好的容器，但这不是必需的。只需将它放在 divB 内的任何位置(而不是 divA 内)就可以了。

您可以像我一样使用内容来定义高度，或者使用 CSS 中设置的绝对高度。

希望这就是您想要的。

罗伊