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

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

#twoDivWrapper
{
    position:relative;
}

#topDiv
{
}

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

上面的CSS将两个div垂直堆叠在一起，但当顶部div变高时，底部部分会侵占底部div

HTML:

电子邮件地址
电话号码

这是一些东西

下面是一个例子。在本文中，我固定了bootom div的高度，上部div调整其高度以填充容器div

如果你想让上面的div有固定的高度，只需切换它们的类即可

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

*{
框大小：边框框；
}
body，html，.bodyDiv{
身高：100%；
宽度：100%；
保证金：0；
}
.bodyDiv{
显示器：flex；
弯曲方向：立柱；
背景颜色：绿色；
}
#容器
{
保证金：0自动；
宽度：80%；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
柔性生长：1；
}
#页脚
{
保证金：0自动；
宽度：80%；
文本对齐：居中；
高度：1.5em；
背景色：白色；
边框：0.2米纯黑色；
弹性收缩：0；
}

测试栏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>

废话废话

为什么不试试这个

Post HTML这就是绝对定位的作用。为什么需要在这里？除非您没有设置任何coordonates:即使如此，使用.Divs默认值垂直堆叠也是平均的。请澄清您的具体问题或添加其他详细信息，以突出显示您需要的内容。正如目前所写的，很难准确地说出你在问什么。寻求代码帮助的问题必须包括在问题本身中重现代码所需的最短代码，最好是在一个简单的文本中。看见

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