如何从容器底部堆叠可变高度的多个绝对区域

<div class="container" style="position: relative; height: 500px"> 
    <div class="stack1"> 
    multi line content 
    </div> 
    <div class="stack2"> 
    multi line content 
    </div> 
</div>

我希望“堆栈2”和“堆栈1”都停靠在“堆栈2”顶部的“堆栈1”的容器底部。如何从容器底部堆叠可变高度的多个绝对区域

我知道如何只用一个栈做，通过设置DIV绝对和底部：0

任何帮助吗？谢谢。

来源

2013-11-22 sheaujye

.stack1, 
.stack2 { 
    position: absolute; 
} 
.stack2 { 
    height: 100px; 
    bottom: 0; 
    background: red; 
} 
.stack1 { 
    bottom: 100px; 
    background: green; 
}

堆栈2的高度应该是堆栈1的底部值。请参阅：http://jsfiddle.net/355nZ/

编辑：

如果这两个项目的高度是未知的，你不得不窝在另一个容器中，你可以再坚持底部的两个街区。像这样：http://jsfiddle.net/355nZ/1/

来源

2013-11-22 04:22:27

让我们考虑的方案，其中两个栈1和stack2中的高度未知？你会如何解决它？ – sheaujye

@sheaujye你可以在另一个容器中嵌套两个块吗？看到我更新的答案。 –

如何从容器底部堆叠可变高度的多个绝对区域

回答

相关问题