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？

2 个答案: