1

我有这个文件：

索引.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}

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

我试过：

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

但仍然无法正常工作

4

2 回答 2

1

添加overflow:auto到#page.

jsFiddle 示例

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

于 2013-03-21T20:22:59.317 回答
0

清除你的浮动.. 使用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) */
}
于 2013-03-21T20:25:31.503 回答