0

我有下面的布局，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;
}
4

3 回答 3

2

您需要清除浮动，您可以在 CSS 中使用下面的块并在下面的元素上调用类

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

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

演示

说明：上面的属性块会自动清除包含浮动元素的父元素，您也可以使用overflow: hidden;，但我不喜欢使用清除浮动，overflow: hidden;因为它有一些缺点。另外我想告诉你，上面的语法可能会在 IE 中给你带来麻烦，但你也可以查看许多跨浏览器兼容的明确修复黑客，但如果你不关心 IE8 <=，那么你可以使用它。

您可以在此处阅读我的答案以获取更多信息

于 2013-08-17T10:04:33.417 回答
0

像这样

演示

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;
}

演示1

于 2013-08-17T10:05:28.337 回答
0

这是一种方法：

.spacer {
    clear: both;
}

然后<div class="spacer"></div>在您希望溢出包装的地方添加一个。

使用 :after 伪元素还有另一种更现代的方法。

于 2013-08-17T10:09:15.513 回答