CSS部分自動調整高度？

我有一個包含兩個其他部分的HTML部分「all」。我無法讓網站根據我放入其他兩個部分的內容的長度來調整「全部」部分的高度。CSS部分自動調整高度？

<section id="all"> 
    <section id="left_content"> 
     <p>Something here.</p>    
    </section> 
    <section id="right_content"> 
     <p>Something here.</p> 
    </section> 
</section>

我目前的高度設置爲700px的固定大小。我想知道是否可以在CSS中使該部分的高度與left_content和right_content部分的大小相關。

#all { 
    width: 900px; 
    height: 700px; 
    margin: 0 auto; 
    padding-top: 20px; 
    background: #F4F4F4; 
} 

#left_content { 
    float: left; 
    width: 570px; 
    margin-top:-20px; 
    padding: 0px 20px 10px 20px; 
    line-height: 25px; 
    font-size: 12px; 
} 

#right_content { 
    border-left:4px solid #cccccc; 
    float: right; 
    width: 250px; 
    padding: 0px 10px 20px 20px; 
    line-height: 20px; 
    font-size: 12px; 
}

來源

2012-04-17 Takkun

將#all height設置爲自動。和溢出：隱藏; – 2012-04-17 17:52:20

是爲你工作.. – 2012-04-17 18:00:29

我試過這個，是的它做我在找什麼。我很抱歉沒有提到這一點，但left_content和right_content的高度不一樣，所以下面的解決方案導致了很大的差距。此解決方案需要兩個高度中較大的一個，並正確填充#all背景。 – Takkun 2012-04-17 18:03:18

不要給#all高度
清除你的花車

您的包裝不能確定的高度，而子項是浮動的。你需要一個「結束」浮動的元素。 <div style='clear:both'></div>是清除浮游物的常用方法。 Clearfix是另一種技術。

來源

2012-04-17 17:45:11

通過清除我的花車，你的意思是什麼？ – Takkun 2012-04-17 17:48:34

查看我上面的編輯。 – 2012-04-17 17:53:26

刪除了#ALL高度聲明（如Diodeus說）。然後，您需要應用兩個內容div（如頁腳）下方的清除元素，或者將一個clearfix應用於div #all。

例如：

/* For modern browsers */ 
#all:before, 
#all:after { 
    content:""; 
    display:table; 
} 

#all:after { 
    clear:both; 
} 

/* For IE 6/7 (trigger hasLayout) */ 
#all { 
    zoom:1; 
}

這是Nicolas Gallagher's excellent micro clearfix直接複製粘貼&。

來源

2012-04-17 17:52:58 chipcullen

CSS部分自動調整高度？

回答

相關問題