Div不在html中擴展

我有下面的佈局，bodyContainer div沒有增長，即使表單中添加了更多的元素。我已粘貼在的jsfiddle代碼，http://jsfiddle.net/ArWVX/1/Div不在html中擴展

<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta charset="utf-8"> 
<link type="text/css" rel="stylesheet" href="../css/style.css" /> 
</head> 
<body> 
     <div id="container"> 
      <div id="headerContainer">Header</div><!--header--> 

      <div id="bodyContainer"> 
       <div id="leftNav"> 
        <ul> 
         <li><a href=''>Admin</a></li> 
         <li><a href=''>Admin</a></li> 
         <li><a href=''>Admin</a></li> 
         <li><a href=''>Admin</a></li> 
         <li><a href=''>Logout</a></li> 
        </ul> 
       </div> <!--leftNav--> 

       <div id="content"> 
        <form id="form" method="post" action="index.php"> 
         <div> 
          <label for="username">Username</label> 
          <input type="username" name="username" value="username"> 
         </div> 

         <div> 
          <label for="password">Password</label> 
          <input type="password" name="password" value="password"> 
         </div> 

         <div id="submitDiv">  
          <input type="submit" name="submit" value="submit"> 
         </div> 
        </form> 

       </div> <!--content--> 
     </div><!--bodyContainer--> 

     <div id="footerContainer">Footer</div><!--footer-->  
    </div><!--container--> 
</body>

CSS /* CSS文件*/ * { 餘量：0; 填充：0; }

body { 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size: 12px; 
bakground-color:#FFFFFF; 
} 


#container { 
width: 100%; 
} 


#headerContainer { 
margin: 0 auto; 
width: 96%; 
height: 10%; 
border:1px solid #000000; 
} 


#bodyContainer { 
margin: 0 auto; 
width: 96%; 
border:1px solid #000000; 
} 



#leftNav { 
margin: 0 auto; 
width: 15%; 
border:1px solid #000000; 
float: left; 

} 



#leftNav ul{ 
list-style-type:none; 
margin-left: 3px; 
padding: 3px 0px 3px 0px; 
} 


#leftNav ul li{ 

} 


#leftNav ul li a{ 
font-size: 12px; 
display:block; 
text-decoration:none; 
} 


#leftNav ul li a:hover{ 
background-color:#F7F7F7; 
} 




#content { 
border:1px solid #000000; 
margin-left: 15%; 
} 




#footerContainer { 
margin: 0 auto; 
width: 96%; 
height: 10%; 
border:1px solid #000000; 
}

來源

2013-08-17 Code

你需要清除浮動，可以使用下面的框在你的CSS和調用類的元素下面

<div id="bodyContainer" class="clear"> 

.clear:after { 
    display: table; 
    content: ""; 
    clear: both; 
}

Demo

說明：以上塊的屬性會自行清除父元素持有浮動元素，您也可以使用overflow: hidden;，但我不喜歡使用overflow: hidden;清除浮動，因爲它有一些不利的方面。另外我想告訴你，上面的語法可能會讓你在IE中遇到麻煩，但是你也可以看看那些跨瀏覽器兼容的清除修復黑客，但是如果你不關心IE8 < =比你可以使用它。

你可以閱讀我的答案here更多信息

來源

2013-08-17 10:04:33

非常感謝你 – Code

@Code you welcome :) –

像這樣

DEMO

CSS

/* CSS文件*/

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    bakground-color: #FFFFFF; 
} 
#container { 
    width: 100%; 
} 
#headerContainer { 
    margin: 0 auto; 
    width: 96%; 
    height: 10%; 
    border: 1px solid #000000; 
} 
#bodyContainer { 
    margin: 0 auto; 
    width: 96%; 
    border: 1px solid #000000; 
} 
#leftNav { 
    margin: 0 auto; 
    width: 15%; 
    border: 1px solid #000000; 
    float: left; 
} 
#leftNav ul { 
    list-style-type: none; 
    margin-left: 3px; 
    padding: 3px 0px 3px 0px; 
} 
#leftNav ul li { 
} 
#leftNav ul li a { 
    font-size: 12px; 
    display: block; 
    text-decoration: none; 
} 
#leftNav ul li a:hover { 
    background-color: #F7F7F7; 
} 
#content { 
    border: 1px solid #000000; 
    margin-left: 15%; 
    min-height:500px; 
} 
#footerContainer { 
    margin: 0 auto; 
    width: 96%; 
    height: 10%; 
    border: 1px solid #000000; 
} 
.clearfix { 
    clear: both; 
}

DEMO1

來源

2013-08-17 10:05:28 falguni

下面是做到這一點的一種方法：