我有下面的布局,bodyContainer div 没有增长,即使表单添加了更多元素。我已将代码粘贴在 jsfiddle,http://jsfiddle.net/ArWVX/1/
<!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 文档 */ *{ margin: 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;
}