4

我有这个 HTML：

<body>
<div id="logo">
    <table id="width100" cellpadding="0" cellspacing="0"  >
        <tr>
            <td width="33.33%" align="left">&nbsp;</td>
            <td width="33.34%" align="center"><a href="http://www.rawgameshop.com/"><img src="images/logo_new.png" /></a></td>
            <td width="33.33%" align="right"><img src="images/logo_right.png" /></td>
        </tr>
        <tr bgcolor="#731000" id="width100">
            <td height="15" colspan="3" ></td>
        </tr>
    </table>
</div>

<center>
<div id="container">
    <div id="main_body">
        asd
    </div>
</div>
</center>

这个CSS：

body {
    width:100%;
    height:100%;
    margin:0px;
    background-color:#ECECEC;
}

#logo {
    width:100%;
    height:165px;
    background-color:#FFFFFF;   
}

#width100 {
    width:100%;
}

#container {
    background-color:#FFFFFF;
    height:100%;
    width:900px;
}

#main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%;
}

我的问题是：为什么我的main_bodydiv 没有延伸到页面中间？它只有字母那么高。

如果我删除<center>HTML 标签，它会向下拉伸，但屏幕尺寸为 100%，这意味着我必须向下滚动到最后。我希望它位于屏幕边缘，而不是更远。

4

2 回答 2

0

height:100%获取第一个设置了高度的父元素的高度。由于您所有的父对象都有一个百分比高度，因此它会一直上升到身体并占据该高度的 100%。

您将需要设置#logo为百分比高度，然后设置为百分比main_body的其余部分，否则您将需要 javascript / jquery 来调整您的大小main_body，因为 css 尚未启用计算方法（尽管我认为它可能即将推出)

看看这篇文章，因为他们试图实现同样的目标：

使用 CSS3 计算值

如果您要使用 jQuery 路由，则需要将 jquery 库添加到页面（我通常将其放在页面底部），然后在此之后的任何地方都需要包含要运行的脚本，如下所示：

<script type="text/javascript">
  $(document).ready(function () { 
    var newHeight = $(window).height() - $('#logo').height();
    var oldHeight = $('#container').height();

    if (newHeight > oldHeight) {
      $('#container').height(newHeight);
    }
  });
</script>

这$(document).ready(function(){})意味着一旦文档（网页）完成加载，函数内的任何内容都将被触发

于 2013-01-31T11:24:16.950 回答
0

添加height:100%到html,body和删除<center>标签，而不是margin:0 auto使用#container

  html,body{height:100%}
  #container {
    background-color:red;
    height:100%;
    width:900px; margin:0 auto
  }
  #main_body {
    width:800px;
    background-color:#FFFFFF;
    height:100%; margin:0 auto
  }

演示

对于那个问题，像这样改变html，

  • 将外部 div 添加到整个标记，制作position:relative并提供position:absolute给容器 div
  • 用于z-index将容器 div 推送到徽标 div 下方。
  • 最后在里面添加一个空的div#main_body来给出高度（与logo div高度相同）

HTML

<div id="wrapper">
<div id="logo">
   logo html
</div>
<div id="container">    
    <div id="main_body">
        <div class="space"></div>
        asd
    </div>
</div>
    </div>

CSS

#wrapper{
    height:100%; 
    background:grey; 
    position:relative; 
}
#container {
   background-color:red;  
   height:100%;
   width:900px; 
   margin:0 auto; 
   position: absolute;
   top: 0; bottom: 0; left: 0; right: 0; 
   z-index:1;
}
#main_body {
   width:800px;  
   background-color:#FFFFFF;
   height:100%; 
   margin:0 auto; 
}
.space{height:165px}

演示 2

于 2013-01-31T11:16:59.713 回答