HTML/CSS：Div未擴展到內容高度

Question

我有幾個未擴展的div元素以匹配其內容的高度。我已經讀過，這可能是由浮動內容引起的;這個內容不是浮動的 - 雖然我開始覺得我應該把我的電腦扔在河裏。這算不算？

代碼：

#interaction-options-container.display-dialogue { 
 
    left: 15%; 
 
    width: 70%; 
 
} 
 
#interaction-options-container.full-border, .dialogue-container.full-border { 
 
    border: 1px solid #33ffff; 
 
} 
 
#interaction-options-container { 
 
    margin: 4px 0px 4px 0px;  
 
    z-index: 100; 
 
    position: absolute; 
 
    left: 35%; 
 
    bottom: 4%; 
 
    width: 30%; 
 
    line-height: 1.4; 
 
    opacity: 0.75; 
 
} 
 
#interaction-options-container .heading { 
 
    font-size: 16px; 
 
    color: black; 
 
    padding: 0.1px 12px 0.1px 12px; 
 
    background-color: grey; 
 
} 
 
.heading { 
 
    font-weight: bold; 
 
    font-size: 1.5em; 
 
    padding: 8px 12px 0px 12px; 
 
} 
 
#interaction-options-container p { 
 
    margin: 8px 0px 8px 0px; 
 
} 
 
#interaction-options-container .dialogue p { 
 
    margin: 4px 0px 4px 0px; 
 
} 
 
#interaction-options-container .button, #interaction-options-container .evidence-options-container .button { 
 
    cursor: pointer; 
 
    color: white; 
 
    font-size: 14px; 
 
    padding: 0.1px 12px 0.1px 12px; 
 
    background-color: #333333; 
 
    opacity: 0.85; 
 
    border-bottom: 1px solid #8d8d8d; 
 
} 
 
#interaction-options-container .dialogue-container { 
 
    padding: 0px; 
 
    margin: 0px; 
 
    width: 100%; 
 
    height: 32px; 
 
    background-color: #333333; 
 
    float: none; 
 
} 
 
#interaction-options-container .dialogue { 
 
    text-align: center; 
 
    margin: auto; 
 
    font-size: 16px; 
 
    font-weight: bold; 
 
    padding: 1px 12px 1px 12px; 
 
    color: white; 
 
    background-color: #333333; 
 
} 
 
.dialogue-container .dialogue.option-divider { 
 
    border-bottom: 1px solid #333333; 
 
} 
 

 
* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
}

<div class="hud-element display-dialogue full-border" id="interaction-options-container"> 
 
    <div class="heading"><p>Choose a reply:</p></div> 
 
     <div class="dialogue-container button"> 
 
      <div class="dialogue option-divider"><p>Option one here</p></div> 
 
     </div> 
 
    <div class="dialogue-container button"> 
 
     <div class="dialogue option-divider"><p>Option two here</p></div> 
 
    </div> 
 
    <div class="dialogue-container button"> 
 
     <div class="dialogue option-divider"><p>Option three here</p></div> 
 
    </div> 
 
    <div class="dialogue-container button"> 
 
     <div class="dialogue"><p>Option four here. As an example this text should be long enough to require wrapping to a new line. I will therefore have to keep typing until I've added enough text to sufficiently fill the horizontal with of the containing div. Also, thanks for potentially answering my question, which I will get to below...</p></div> 
 
    </div> 
 
</div>

的問題是，當一段對話需要包裝到一個新的路線，.dialogue-container .button DIV不高擴展匹配.dialogue的height DIV。因此內部divs延伸越過邊界線，這看起來很糟糕。
如果有人有任何指示，我的電腦會感謝你。 乾杯。

Answer 1

#interaction-options-container .dialogue-container { 
    padding: 0px; 
    margin: 0px; 
    width: 100%; 
    //height: 32px; 
    background-color: #333333; 
    float: none; 
}