CSS浮動高度自動調整

我這裏有我的CSS代碼。我的問題是，當內容有很多東西時，它會調整它的高度大於導航的高度。我想要的是當這個浮動高度之一調整它包括另一個。CSS浮動高度自動調整

<div id="main"> 
    <div id="navigation"></div> 
    <div id="content"></div> 
    <div id="footer"></div> 
</div>

CSS代碼如下：

#main{ 
    width: 960px; 
    height: 500px; 
    margin: auto; 
} 
#navigation{ 
    float: left; 
    width: 200px; 
    background-color: #C7E1BA; 
} 
#content{ 
    float: right; 
    width: 740px; 
    background-color: #F6E4CC; 
    padding: 10px; 
} 
#content, #navigation { 
    height: 100%; 

} 
#footer{ 
    clear: both; 
    width: 960px; 
    height: 100px; 
    background-color: #628B61; 
    margin: auto; 
}

來源

2013-07-17 Ikong

您可以同時設置#navigation和#content到display: table-cell再和他們兩個擺脫float的的。這應該夠了吧。如果你想要一個最小高度，你可以將其設置在div的其中一個上，其他div也會跟隨。這應該在all browsers and IE8+。

#navigation{ 
    width: 200px; 
    background-color: #C7E1BA; 
} 
#content{ 
    width: 740px; 
    background-color: #F6E4CC; 
    padding: 10px; 
} 
#content, #navigation { 
    display: table-cell; 
}

這裏有一個jsFiddle

來源

2013-07-17 01:55:51

試試這個：

#content{ 
    float: right; 
    width: 740px; 
    background-color: #F6E4CC; 
    padding: 10px; 
    display:table; 
}

來源

2013-07-17 01:31:49 GilbertOOl

添加相同的填充，以#navigation爲＃內容的。編輯CSS類，如下

#navigation{ 
    float: left; 
    width: 180px; 
    background-color: #C7E1BA; 
    padding : 10px; 
}

來源

2013-07-17 01:32:43 mohkhan

這是一個很好的建議，但接下來的問題是＃內容內容四溢。它重疊在我的腳註:( – Ikong

多麼美麗的使用情況FlexBox！

#main{ 
 
    width: 960px; 
 
    margin: auto; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 
#navigation{ 
 
    min-height: 400px; 
 
    width: 200px; 
 
    background-color: #C7E1BA; 
 
} 
 
#content{ 
 
    width: 760px; 
 
    background-color: #F6E4CC; 
 
} 
 

 
#footer{ 
 
    width: 100%; 
 
    height: 100px; 
 
    background-color: #628B61; 
 
}

<div id="main"> 
 
    <div id="navigation"></div> 
 
    <div id="content"></div> 
 
    <div id="footer"></div> 
 
</div>

來源

2017-10-26 19:48:44 davemaloney

CSS浮動高度自動調整

回答

相關問題