CSS和DIV與動力高度

我有一個網頁結構像這樣的：CSS和DIV與動力高度

<div class="total"> 
    <div class="menu"> 
    </div> 
    <div class="content"> 
    </div> 
</div>

所以「菜單」 div包含我左邊的菜單，和日「內容」 div包含一些動態文本。實際上，我所做的結構都是以正確的方式放置在我的「全部」分區中。我其實編輯我的「總」格在我的CSS是這樣的：

.total{ 
position:relative; 
top:50px; 
margin: 0 auto; 
background-color:#eeeeee; 
height:auto; 
border:2px solid #000; 
border-color:rgb(82,115,154); 
}

的問題是，我不能獲得什麼其實我是想：邊界是所有的頂部（它就像一個水平行）和不同背景顏色的div不會出現。

我怎樣才能使「總」div的高度動態？

編輯：鏈接jsFiddle

來源

2012-12-28 abierto

jsfiddle請！ – tchap

你是什麼意思？ – abierto

他的意思是發佈一個JSFiddle不起作用的示例代碼，以便可以觀察和測試以發現問題。 http://jsfiddle.net/ – scragar

的.total元素已經完全崩潰了，因爲所有的孩子都浮動。所有你需要做的是添加一個清晰的修正。

http://jsfiddle.net/CJZCt/3/

.total{ 
position:relative; 
top:50px; 
margin: 0 auto; 
background-color:#eeeeee; 
height:auto; 
border:2px solid #000; 
border-color:rgb(82,115,154); 
    overflow: hidden; 
}

用於清除浮動的其他方法可以在這裏找到：http://nicolasgallagher.com/micro-clearfix-hack/

添加到您的CSS和CF類：https://stackoverflow.com/a/1633170/1652962

來源

2012-12-28 13:56:21 cimmanon

您可以用clearfix解決這個問題您的div.content

/** 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
}

測試：http://jsfiddle.net/CJZCt/4/

來源

2012-12-28 14:00:22 karacas

CSS和DIV與動力高度

回答

相關問題