Html DIV在达到某个限制后不会自动调整其高度。请看_Html_Height

Html DIV在达到某个限制后不会自动调整其高度。请看

html

Html DIV在达到某个限制后不会自动调整其高度。请看,html,height,Html,Height,以下是HTML代码： <!DOCTYPE html> <head> <title>Gallery</title> <meta charset="UTF-8"> <link rel="stylesheet" href="design.css" /> </head> <body> <div id="wrapper"> &l

以下是HTML代码：

<!DOCTYPE html>

   <head>
     <title>Gallery</title>
     <meta charset="UTF-8">
     <link rel="stylesheet" href="design.css" />
   </head>
   <body>

  <div id="wrapper">



     <div id="title">
     <p id="title_font">
     NAVNEET<br />
     KHARE
     </p>
     </div>



   <div id="flickr">

        <!-- Content will go here -->

   </div>

   <div class="page_header">
     GALLERY
   </div>

    <?php 
     include ("navig.html");
    ?> 
   </div>      

   </body>


</html>

问题是，正如您所看到的，我将div“flickr”的大小设置为600 px（高度），因此，我希望包装器div相应地扩展以包含所有子div。但结果并非如此。我在下面附上一张图片，显示我得到的结果。我使用了一个红色箭头来显示问题：

如果有人能突出我的错误那就太好了！提前多谢

不要到处使用绝对位置。使用此代码，它将为您工作

<!DOCTYPE html>

<head>
 <title>Gallery</title>
 <meta charset="UTF-8">
<style>charset "utf-8";
/* CSS Document */
 *{margin:0; padding:0; border:0; }

 body {background-color:#000;}
 #wrapper {position:absolute;width:870px;min-height:100%;background-color:#191919;left:50%;margin-left:-435px;height:auto;}
#title {}
#title_font {color:#FFF;font-size:60px;line-height:100%;}
  #navig {position:absolute;width:200px;right:-4%;top:400px;}
.nav {position:absolute;background-color:#666;height:20px;width:150px;display:block;text-decoration: none;text-align: center;color:white;
}

.nav:hover
 { 
   background-color : #A0050A;

 }


#front_image {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#chat {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#grooveshark {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#comment_box {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#flickr {height:600px;width:677px;background-color:white;}

#hide {position:absolute;width:577px;height:30px;background-color:#191919;top:615px;left:70px;z-index:2;}
.page_header {position:absolute;top:250px;right:2%;color:#BD060B;font-size:xx-large;text-align:center;border-style:solid;border-color:#BD060B;border-width:medium;width:150px;word-wrap:normal;word-spacing:5px;padding:2px;}</style>
   </head>
   <body>

  <div id="wrapper">



     <div id="title">
 <p id="title_font">
 NAVNEET<br />
 KHARE
 </p>
 </div>



   <div id="flickr">

    <!-- Content will go here -->

   </div>

   <div class="page_header">
 GALLERY
   </div>

    <?php 
     include ("navig.html");
    ?> 
   </div>      

   </body>


</html>


画廊
字符集“utf-8”；
/*CSS文档*/
*{边距：0；填充：0；边框：0；}
正文{背景色：#000；}
#包装{位置：绝对；宽度：870px；最小高度：100%；背景色：#191919；左侧：50%；左边距：-435px；高度：自动；}
#标题{}
#标题(字体{颜色#FFF；字体大小：60px；行高：100%；}
#导航{位置：绝对；宽度：200px；右侧：-4%；顶部：400px；}
.nav{位置：绝对；背景颜色：#666；高度：20px；宽度：150px；显示：块；文本装饰：无；文本对齐：居中；颜色：白色；
}
.导航：悬停
{ 
背景色：#A0050A；
}
#前_图像{位置：绝对；顶部：150px；左侧：70px；填充底部：30px；}
#聊天{位置：绝对；顶部：150px；左侧：70px；填充底部：30px；}
#grooveshark{位置：绝对；顶部：150px；左侧：70px；填充底部：30px；}
#注释框{位置：绝对；顶部：150px；左侧：70px；填充底部：30px；}
#flickr{高度：600px；宽度：677px；背景色：白色；}
#隐藏{位置：绝对；宽度：577px；高度：30px；背景色：#191919；顶部：615px；左侧：70px；z索引：2；}
.page_页眉{位置：绝对；顶部：250px；右侧：2%；颜色：#BD060B；字体大小：xx大；文本对齐：居中；边框样式：实心；边框颜色：#BD060B；边框宽度：中等；宽度：150px；换行：正常；字间距：5px；填充：2px；}

导航网

哈雷

画廊

绝对定位太多。@Scott有什么问题吗？我认为绝对定位可以在包含亲子关系的行为中使事物更“紧密”地联系在一起。有人能解释一下为什么不建议使用绝对定位吗？这是语义上的原因还是逻辑上的原因？当您绝对定位某个对象时，您是在告诉该元素根据浏览器窗口（或父元素）进行自我配置。因此，您删除了它动态调整自身的能力。这里您需要的是一个动态调整的div，但您需要绝对定位它。这两者几乎是相互排斥的。绝对定位是你应该少用的东西。我的偏好是始终将其用于父元素。因此，虽然对象可能位于页面中，但它们的位置并不是基于窗口本身。感谢您的回复，@Scott。我想我现在明白了。我理解的是，因为我使用的是绝对定位，浏览器没有为div内的元素保留任何空间，因此，它不知道包含div的垂直长度。谢谢你的意见，斯科特！如果我仍然遗漏了什么，请纠正我：p这实际上并不能解决我的问题。。。。如果我像你做的那样，如果flickr div的宽度小于我现在设置的宽度，我怎么还能改变它的位置呢？据我所知，静态成员不受左、右等参数的影响。如果我错了，请纠正我。

<!DOCTYPE html>

<head>
 <title>Gallery</title>
 <meta charset="UTF-8">
<style>charset "utf-8";
/* CSS Document */
 *{margin:0; padding:0; border:0; }

 body {background-color:#000;}
 #wrapper {position:absolute;width:870px;min-height:100%;background-color:#191919;left:50%;margin-left:-435px;height:auto;}
#title {}
#title_font {color:#FFF;font-size:60px;line-height:100%;}
  #navig {position:absolute;width:200px;right:-4%;top:400px;}
.nav {position:absolute;background-color:#666;height:20px;width:150px;display:block;text-decoration: none;text-align: center;color:white;
}

.nav:hover
 { 
   background-color : #A0050A;

 }


#front_image {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#chat {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#grooveshark {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#comment_box {position:absolute;top:150px;left:70px;padding-bottom:30px;}

#flickr {height:600px;width:677px;background-color:white;}

#hide {position:absolute;width:577px;height:30px;background-color:#191919;top:615px;left:70px;z-index:2;}
.page_header {position:absolute;top:250px;right:2%;color:#BD060B;font-size:xx-large;text-align:center;border-style:solid;border-color:#BD060B;border-width:medium;width:150px;word-wrap:normal;word-spacing:5px;padding:2px;}</style>
   </head>
   <body>

  <div id="wrapper">



     <div id="title">
 <p id="title_font">
 NAVNEET<br />
 KHARE
 </p>
 </div>



   <div id="flickr">

    <!-- Content will go here -->

   </div>

   <div class="page_header">
 GALLERY
   </div>

    <?php 
     include ("navig.html");
    ?> 
   </div>      

   </body>


</html>