Question

我有一个问题div没有改变它的高度，当它的内部内容（如ul，其他div等）发生变化时，它没有在CSS中设置。

我的HTML代码：

<div id="main_wrapper"> 
    <div id="navigation"> 
        <ul>
            <li><a href="#"> link one </a></li> 
            <li><a href="#"> link two </a></li> 
            <li><a href="#"> link three </a></li> 
            <li><a href="#"> link four </a></li> 
        </ul> 
    </div> 
</div>

我的css代码：

#main_wrapper { 
  display: block;
  border:1px solid black; 
} 
#navigation { 
  background-color: rgba(0, 0, 0, 0.4); 
  position: relative;  
  padding: 8px; 
  float: right; 
}

demo here

Answer 1

将overflow: auto;添加到#main_wrapper。

Answer 2

div未获取其中元素高度的原因与显示浮动元素的怪癖有关。在#navigation元素之后添加空元素并将clear: both;作为样式将导致#main_wrapper符合浮动元素的高度。

或者，您可以将display: inline-block;添加到包装器div，但您还必须指定宽度（width: 100%;）。使用clearfix是首选解决方案。

演示： http://jsfiddle.net/NXNDV/4/

根据父div中的子div更改父div的大小

2 个答案: