当顶部 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>

Answer 2

你可以试试这个

      *{
          box-sizing: border-box;
       }
       .body
       {
              width:100%;
              min-height:100%;
              background:#fff;
       }

       #twodivwrapper
       {

              min-height:100%;
              width:80%;
              margin:0% 10% 0% 10%;
              background:#f9f9f9;
            box-shadow:1px 3px 2px 1px #888;
       }
       #topdiv
       {
          width:100%;
          min-height:50%;
          padding:20px;
          background:#eeeeee;
          box-shadow: 2px 1px 2px 1px #888;
          margin-bottom:5px;
       }
       #bottomdiv'
       {
          width:100%;
          min-height:50%;
          padding:50px;
          background:#eeeeee;
          box-shadow: 2px 1px 2px 1px #888;
       }

您可以根据需要调整高度和宽度。

并且 HTML 标记是：

       <div id="twodivwrapper">
        <div id="topdiv">
           <p> Blah Blah Blah</p>
        </div>
        <div id="bottomdiv">
            <p>Why don't try this</p>
        </div>
       </div>

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

How to stack two divs vertically (and within another div) when the top div can change height?

html

css

position