Question

我有以下HTML标记 -

<div class="bar">
<p> Example Text </p>
</div>

<div class="dynamic-height">
 <div class="box">
  <p> Example Text 1</p>
 </div>
</div>

<div class="footer">
This is footer
</div>

以及以下CSS -

.bar{
     height:20px;
     width:100%;
    }
 .box
    {
      float:left;
      width:50px
      height:50px;
      border:1px solid black;
    }
.dynamic-height
    {
     min-height:50px;
     width:100%;
    }
. body
    {
       height:200px;
    }
.footer
    {
    height:20px;
    position:relative;
    bottom:0;
    }

以下是这些div的预期规则 -

带有课程的div＆＃34; dynamic-height＆＃34;将有更多的

元素使用javascript动态添加到它。所以它的高度将是动态
div＆＃34; footer＆＃34;将始终必须在底部，动态高度和页脚div之间的距离应始终为10px; （保证金：10px）

遇到问题 -

我添加动态＆＃34; p＆＃34;使用javascript的元素，使用类＆＃34;动态高度＆＃34;的div，此div的高度增加，如果我继续添加＆＃34; p＆＃34;元素高度增加，然后它与页脚div重叠。

我想要的是始终在页脚div和动态高度div之间保持10px的距离

Answer 1

只需在页脚中添加margin-top即可拥有10px的空间

.footer
{
    margin-top: 10px;
    height:20px;
    position:relative;
    bottom:0;
}

Answer 2

清除.box div上的.footer div中的左侧浮点数：

.footer{
    height:20px;
    position:relative;
    bottom:0;
    clear:left;
    margin-top:10px;
}

应该这样做。 .footer div挂在重新定位的.box div。

上

Answer 3

在.dynamic-height类中添加margin-bottom，如下所示margin-bottom :10px;

Answer 4

就我的问题而言，这里的JSFiddle会使我的案例清楚。

<div class="bar">
<p> Example Text </p>
    <input type="button" onclick="add();" value="Add box"/>
</div>

<div class="dynamic-height" id="dyn">
     <div class="box">
      <p> Example Text 1</p>
     </div>        
</div>
<div class="footer">
This is footer
</div>

我能够从tahdhaze09获取提示并使用它将overflow属性设置为auto，为动态高度div。

正如我的原始问题，或许不够清楚，是使两个div之间的距离保持不变，其中一个具有动态高度。所以对于这个div，溢出属性做了神奇的

保持2个div之间的距离不变

4 个答案: