Question

我有这个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_body div不会跨越页面中间？它只有字母高。

如果我删除<center> HTML标记，它会向下拉伸，但屏幕尺寸为100％，这意味着我必须向下滚动到最后。我希望它能够进入屏幕的边缘，而不是更进一步。

Answer 1

将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
  }

<强> DEMO

对于该问题，请更改html，

为整个标记添加外部div，将其设为position:relative并将position:absolute提供给容器div
使用z-index将容器div推到徽标div下方。
最后在#main_body内添加一个空div来给出高度（与徽标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}

<强> DEMO 2

Answer 2

height:100%获取设置了高度的第一个父元素的高度。由于所有父对象都有一个百分比高度，它将直接到达身体并占据该高度的100％。

您需要将#logo设置为百分比高度，然后将main_body设置为百分比的其余部分，否则您需要javascript / jquery来调整main_body的大小，因为css hasn还没有一种方法可以进行计算（虽然我认为它可能即将推出）

看看这篇文章，因为他们试图达到同样的目的：

Calculate value with 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(){})表示一旦文档（网页）加载完毕，该函数中的任何内容都将被触发

如何使div使用100％可用高度（减去顶部徽标高度）

2 个答案: