Question

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

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

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

我已经尝试通过将这些div包装在包装器中来使用position relative和float，但是当我尝试将Div B保持对齐或位于页脚上方时，整个事情就会中断。

我有一种感觉，这需要回到基础，任何帮助将不胜感激

感谢

2 个答案:

答案 0 :(得分：1)

答案 1 :(得分：0)

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，我们确保它有位置：绝对位置和顶部位置：-100％，它将移动它与容器divB的高度相同的距离。绝对位置不仅允许我们正确定位它，而且还会将其从影响其父级divB的高度中移除。

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

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

希望这就是你所追求的。

乐罗伊

Answer 2

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

Stack div elements in css vertically (with dynamic height) http://jsfiddle.net/nCrEc/334/

基本上答案是在不使用高度参数的情况下给我的Div A高度，而是在顶部和底部使用绝对定位。这意味着对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;
}

两个Stacked div和控制高度

2 个答案: