当前位置： 文江博客话题详情

DIV 在达到一定限制后不会自动调整其高度。请参阅

发布于 2024-12-23 08:30:32 字数 2885 浏览 0 评论 0原文

以下是 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>

这里是 CSS：

@

charset "utf-8";
/* CSS Document */
*{margin:0px; padding:0px; border:0px; line-height: 100%; font-size: 100%;}

html {height:auto;width:auto;}
body {background-color:#000;width:100%;height:auto;}
#wrapper {position:absolute;width:870px;min-height:100%;background-color:#191919;left:50%;margin-left:-435px;height:auto;}
#title {position:absolute;left:1%;}
#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;
-moz-transition-property:-moz-transform 1s;
-moz-transition-duration:3s;
-moz-transition-timing-function:cubic-bezier(0, 1, 0, 1);
-o-transition-property:-moz-transform 1s;
-o-transition-duration:3s;
-o-transition-timing-function:cubic-bezier(0,1,0,1);
-webkit-transition-property:-moz-transform 1s;
-webkit-transition-duration:3s;
-webkit-transition-timing-function:cubic-bezier(0,1,0,1);
}

.nav:hover
 { 
   background-color : #A0050A;
  -moz-transform:translate(-20px,0px);
  -o-transform:translate(-20px,0px);
  -webkit-transform:translate(-20px,0px);

 }


#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 {position:absolute;top:150px;left:12px;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;}

问题是，如您所见，我已将 div“flickr” 的大小设置为 600 px（高度方向），因此，我期待包装器div 相应扩展以包含所有子 div。但结果并不完全如此。我在下面附上一张图片来显示我得到的结果。我使用红色箭头来显示问题：

https://i.sstatic.net/x0W4K.jpg

如果有人能指出我的错误，那就太好了！提前谢谢大家！

原文

The following is the HTML code :

<!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>

And here goes the CSS :

@

charset "utf-8";
/* CSS Document */
*{margin:0px; padding:0px; border:0px; line-height: 100%; font-size: 100%;}

html {height:auto;width:auto;}
body {background-color:#000;width:100%;height:auto;}
#wrapper {position:absolute;width:870px;min-height:100%;background-color:#191919;left:50%;margin-left:-435px;height:auto;}
#title {position:absolute;left:1%;}
#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;
-moz-transition-property:-moz-transform 1s;
-moz-transition-duration:3s;
-moz-transition-timing-function:cubic-bezier(0, 1, 0, 1);
-o-transition-property:-moz-transform 1s;
-o-transition-duration:3s;
-o-transition-timing-function:cubic-bezier(0,1,0,1);
-webkit-transition-property:-moz-transform 1s;
-webkit-transition-duration:3s;
-webkit-transition-timing-function:cubic-bezier(0,1,0,1);
}

.nav:hover
 { 
   background-color : #A0050A;
  -moz-transform:translate(-20px,0px);
  -o-transform:translate(-20px,0px);
  -webkit-transform:translate(-20px,0px);

 }


#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 {position:absolute;top:150px;left:12px;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;}

The problem is, as you can see, I've made the div "flickr" to be of size of 600 px (heightwise) and thus, I was expecting the wrapper div to expand accordingly to contain all the children divs. But the result isn't quite so. I am attaching a picture below to show what is the result that I am getting. I've used a red arrow to show the problem :

https://i.sstatic.net/x0W4K.jpg

It'd be really great if someone could highlight my mistake! Thanks a bunch in advance!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

酷炫老祖宗 2024-12-30 08:30:32

不要在任何地方都使用绝对位置。使用此代码它将为您工作。

<!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>

Do not use position absolute every where. Use this code It will work for you.

<!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>
回复 原文
~没有更多了~

关于作者

微暖i

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

尘曦

文章 0 评论 0

在梵高的星空下

文章 0 评论 0

善良天后

文章 0 评论 0

韬韬不绝

文章 0 评论 0

qq_CgiN62

文章 0 评论 0

不美如何

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文