html - 当顶部 div 可以改变高度时，如何垂直堆叠两个 div(并在另一个 div 内)？

Question

我尝试使用position:absolute，但是当上面的div展开时，它会与下面的div重叠。

#twoDivWrapper
{
    position:relative;
}

#topDiv
{
}

#bottomDiv
{
    position:absolute;
    margin-top:400px;
    margin-left:20px;
}

上面的CSS将两个div垂直堆叠在彼此的上方和下方，但是当顶部div变高时，它的底部部分会侵占底部div。

HTML:

<div id="twoDivWrapper">
    <div id="topDiv">
        <ul class="my_list">
            <li>E-mail Address</li>
            <li>Phone Number</li>
        </ul>
    </div>
    <div id="bottomDiv">
        <p>This is some stuff.</p>
    </div>
</div>

Answer 1

这是一个例子。在此我固定了 bootom div 的高度，上部 div 调整其高度以填充容器 div。

如果您希望上部 div 具有固定高度，只需切换它们的类即可。

绿色的是他们的容器，你可以根据自己的要求调整它的高度。

*{
  box-sizing: border-box;
}
body, html, .bodyDiv{
  height: 100%;
  width: 100%;
  margin: 0;
}
.bodyDiv{
  display:flex;
  flex-direction: column;
  background-color:green;
}
#container
{
    margin: 0 auto;
    width:80%;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
    flex-grow:1;
}
#footer
{
    margin: 0 auto;
    width:80%;
    text-align: center;
    height:1.5em;
    background-color: white;
    border: 0.2em solid black;
    flex-shrink:0;
}

<div class="bodyDiv">
<div id="container">
    test column 2
    <p>
    blah blah blah...
    </p>
    <p>
    blah blah blah...
    </p>
</div>
<div id="footer">
test content
</div>
</div>