Question

我有这些文件：

的index.php：

<body>
    <div id="page">
        <div id="header"><h1>BANNER</h1></div>
        <div id="pmenu"><?php include 'template/pmenu.php' ?></div><br>
        <div id="text">
            <div id="left">Menu<br>menuMenu<br>menuMenu<br>menu</div>
            <div id="center">ccsal<br>saccsal<br>saccsal<br>sa</div>
            <div id="right">rright<br>rirright<br>rirright<br>ri</div><br>
        </div></div><br>
    </body>

pmenu.php

<nav>
<div id="pmenuli">HOME</div> 
<div id="pmenuli">HTML</div> 
<div id="pmenuli">CSS</div> 
<div id="pmenuli">PHP</div> 
<div id="pmenuli">JAVA SCRIPT</div> 
</nav>

和style.css：

body{text-align: center; background-color: rgb(185, 185, 185);}
#page{ background-color: rgb(225, 225, 225); width:1124px; height: auto; margin:auto;
border-left:2px solid blue;
border-right:2px solid blue;
border-top:2px solid blue;
border-bottom:2px solid rgb(25, 25, 25);}
#pmenu{height: 30px;
background-image: -webkit-gradient(linear,0% 0%,0% 70%,from(#6a6a6a),to(#222));
background-image: -moz-linear-gradient(0% 22px 90deg,#222,#6a6a6a);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
margin: 0 auto 20px;
border: 1px solid #222;
position: relative;
background-color: #6a6a6a;
color: white;
vertical-align: middle;
box-shadow: 2px 2px 2px rgba(0,0,0,.75);
width: 1118px;}
#pmenuli:hover
{height: 30px;
background-image: -webkit-gradient(linear,0% 0%,0% 70%,from(#222),to(#6a6a6a));
background-image: -moz-linear-gradient(0% 22px 90deg,#6a6a6a,#222);
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
display: block;
margin: 0 auto 20px;
border: 1px solid #222;
position: relative;}
#pmenuli{
border: 1px solid black;
float: left;
width: 150px;
height: 29px;
font: 20px Times new roman,Sans-serif;}
a:link{color: white;}
v:link{color: white;}
#left,#center,#right{float: left;}
#left{width: 155px}
#center{width: 555px}
#right{width: 155px}

但如果我在div中添加id为“text”的文本，则#page的高度是相同的。一个屏幕截图： http://artur99.hostyd.com/Untitled.png

我试过了：

height: auto;
height: max-content;
height: content-box;
height: border-box;

但仍然无法正常工作

Answer 1

将overflow:auto添加到#page。

<强> jsFiddle example

当你浮动div的子元素时，为了让div扩展以覆盖它们，你需要将溢出设置为auto或hidden。

Answer 2

清除你的花车..使用clearfix

带有浮动子节点的父节点将丢失其高度，因为浮动元素将从正常文档流中删除..您需要将clearfix应用于此类父元素

例如：具有“nav”和“content”类的元素正在浮动（从正常文档流中删除）因此父“容器”需要clearfix

<div class="container group"> <!-- Applying clearfix to the parent with floated elemets -->
   <div class="nav">
     Some nav items
   </div>
   <div class="content">
     Some content
   </div>       
</div>

CSS：

.nav{
   width: 40%;
   float: left;
 }
 .content{
   width: 60%;
   float: left;
 }
.group:before,
.group:after {
   content: "";
   display: table;
} 
.group:after {
   clear: both;
}
.group {
   zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

高度不起作用

2 个答案: