Question

我有一个名为#sub-menu的包装器，它在cssdesk文件下面以黄色显示。我将其高度设置为auto，但遗憾的是它没有正确包装所有内容。这个问题让我抓狂。希望有人能提供帮助。提前感谢您的回复。干杯。马克。

Answer 1

将overflow:auto;添加到您的#sub-menu

Answer 2

浮动元素会破坏高度。您需要添加一个新div，它将清除父容器高度的所有浮动元素以填充整个长度。

HTML：

<div id="sub-menu">
<div id="form-loc">
        <a id="appliquer-loc" class="button white">filtrer</a>
        <div id="saisi-loc">
            <input id="input-loc" type="text"/>
            <a id="valider-loc" class="button white">valider</a>
            <a id="supprimer-loc" class="button white">supprimer</a>    
            <span id="msg-loc">Valeur saisie incorrecte</span>
        </div>
    </div>
    <div id="proposition-loc">
        <a id="proposer-loc" class="button white">+ Proposer une sortie</a>
    </div>
    <div class="clear"></div>
</div>

CSS：

#sub-menu{
  width:960px;
    height:auto;
    margin-left:auto;
    margin-right:auto;
    background-color:yellow;
}

#form-loc{
    width:800px;
    height:auto;
    float:left;
    position:relative;  
    background-color:rgba(1,1,1,0.2);}

#saisi-loc{
    background-color:rgba(123,123,123,0.2);
    width:auto;}

#input-loc{
    width:300px;
    height:25px;
    border:1px solid gray;}

#msg-loc{
    font-size:14px;
    padding:0 10px;
    font-weight:bold;
    background-color:pink;}

#proposition-loc{
    text-align:right;}

.clear {
  clear: both;
}

css div height自动无法正确包装

2 个答案: