javascript - 使父 div 包含子 div 的所有空间

Question

我的父容器太小，无法容纳我的子 div。

这是父 div。

这是子div

如你所见，我的布局很糟糕。

与我的代码非常相似的例子在这里:http://jsfiddle.net/buz72ck5/

部分代码:

<div class="space-container">
    <div class="space-main-data">
        <ul>
            <li>sp1</li>
            <li>59000</li>
            <li>20000</li>
            <li></li>
            <li style="float: right">
                <input type="hidden" value="355646" class="lease-space-id"><span>Available</span>
            </li>
    </ul>
</div>
<div class="additional-space-data-wrapper">
    <div class="additional-space-data">
        <dl class="ld-generalinfo-wrap ld-main-info">
            <dt>Date Available:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Term Range:&nbsp;</dt>
            <dd><strong>1-30</strong></dd>

            <dt>Lease Type:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Rental Rate Range:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Maximum Contiguous:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Dock High:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Minimum Divisible:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Drive In:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Office Space:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Clear Height:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt></dt>
            <dd></dd>

            <dt>Column Spacing:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>               

            <dt>Rail:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Yard:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>                             

            <dt>Power:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>

            <dt>Truck Court:&nbsp;</dt>
            <dd class="unlisted-value"><strong>Unlisted</strong></dd>        
        </dl>
    </div>
</div>

Answer 1

问题出在这个 .additional-space-data-wrapper 元素是另一个带有 position:Absolute 的元素，将其置于流文档之外，然后是他的 height 为 0。

但是等一下，如果你删除那个 position 元素 additional-space-data 仍然漂浮在父级上然后他的高度 = 0您还需要清除 float 。

试试这个:

.additional-space-data {
   float: left;
   /*position:Absolute REMOVE THIS*/   
   width: 55%;
}
.additional-space-data-wrapper:after {
  display:table;
  content:" ";
  clear:both;
}

检查这个DemoFiddle