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

Question

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

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

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

我尝试通过将这些 div 包装在包装器中来使用相对位置和浮动，但是当我尝试保持 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 中设置的绝对高度。

希望这就是你所追求的。

勒罗伊

Answer 2

在这个问题和小提琴的帮助下，我设法实现了这一点。

垂直堆叠css中的div元素（具有动态高度） http://jsfiddle.net/nCrEc/334/

本质上，答案是给我的 Div A 一个高度，而不使用 height 参数，而是在顶部和底部使用绝对定位。这意味着对 Div B 的更改改变了 Div A 底部的位置（oo er），每当另一个填充底部区域时，就会将中间的 div 向上推。

<div class="con">
    <div class="top"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

然后使用这个 CSS

.con {
width:200px;
top:50px;
bottom:0;
left:0;
position:absolute;
background:#ff0;
}
.top {
width:200px;
height:20px;
position:absolute;
top:0;
left:0;
background:#f60;
}
.bottom {
width:200px;
height:50px;
position:absolute;
bottom:0;
left:0;
background:#f60;
}
.middle {
overflow-y:auto;
min-height:1px;
position:absolute;
bottom:50px;
top:20px;
left:0;
background:#06f;
}