當使用溢出時沒有滾動條：自動和div高

Question

這是一個非常基本的問題，但我的大腦不工作，多次嘗試修復此問題已證明沒有結果。我在父項中使用了overflow：auto，以便它延伸到子項<div> s的高度。通常這適用於我，這次它不工作：相反，它隱藏了多餘的高度，並放入一個滾動條，所以我可以向下滾動。這不是我想要的行爲。這裏的HTML：

<div id="homecasestudy"> 
<h2 class="homecasestudyheading">Case Study</h2> 
<div id="homecasestudyleft"><h3>Lorem</h3><p>Ipsum</p></div> 
<div id="homecasestudyright"> 
<div id="casestudyfrontpic"><img src="uploads/casestudies/1/casestudyex1.jpg" border="0" /></div><div id="paperclip"></div> 
<div id="homecasestudyquote">Quote</div> 
</div> 
</div><!-- homecasestudy --> 

而CSS：

#homecasestudy { 
    width:389px; 
    min-height:257px; 
    background:url(../images/casestudybgtop.jpg) #E5E6E7 no-repeat; 
    padding:13px 0 0 13px; 
    position:relative; 
    overflow:auto; 
    } 

#homecasestudyleft { 
    width:200px; 
    min-height:130px; 
    float:left; 
    margin:20px 0 0 10px; 
    } 

h2.homecasestudyheading { 
    width:366px; 
    height:25px; 
    background:url(../images/casestudytitlebg.jpg) no-repeat; 
    color:#005BA7; 
    margin:0; 
    padding:6px 0 0 8px; 
    font-size:16px; 
    } 

#homecasestudyright { 
    float:left; 
    min-height:180px; 
    } 

#casestudyfrontpic { 
    width:154px; 
    height:160px; 
    background:url(../images/casestudyfrontpic.png) no-repeat; 
    padding:6px 0 0 9px; 
    position:absolute; 
    top:13px; 
    right:8px; 
    } 

#paperclip { 
    width:33px; 
    height:58px; 
    background:url(../images/paperclip.png) no-repeat; 
    position:absolute; 
    top:1px; 
    right:125px; 
    } 

#homecasestudyquote { 
    color:#6E7071; 
    font-size:14px; 
    font-weight:bold; 
    width:147px; 
    position:absolute; 
    top:180px; 
    right:10px; 
    margin:0; 
    padding:0; 
    } 

Answer 1

溢出：汽車不會幫助你在這裏清除你的浮標。 #homecasestudy擴展到包含孩子，但只有頁面邊界。

您可以嘗試清除div的僅CSS方法。

#homecasestudy:after { 
    content:'.'; 
    clear: both; 
    display: block; 
    height: 0px; 
    text-indent: -999999em; 
} 

這製造了塊級元素一切#homecasestudy別的後，使用它來清除浮動，然後做一些調整技巧，以確保樣式規則不會增加空間。

這個技巧在早期版本的IE中不起作用。在這些情況下，您應該將zoom: 1添加到#homecasestudy規則中以代替overflow: auto。

如果你的報價很長，它仍然會溢出盒子的邊界，因爲它絕對定位 - 沒有什麼好的方法來「包含」絕對定位的物品。如果報價必須包含，請嘗試找到一種方法來使用浮動來代替。

在這裏看到一個工作示例。在本例中，我從報價框中刪除了「絕對」。 http://dabblet.com/gist/2116495

Answer 2

一般來說，如果你想有一個容器延伸到適合其內容，不設置溢出規則。當你想要一個容器拉伸時，你不要爲它設置一個高度，如果沒有高度，overflow屬性什麼也不做。

我建議你從#homecasestudy中刪除min-height規則。這會讓內容設置容器的高度，你應該看不到滾動條。沒有height或overflow規則需要。