Question

我有这样的标记：

<html>
<body>
  <div class="page">
      <div class="top_menu">
        some text
      </div>
      <div class='header'>
         menu
      </div>
      <div class="main">
          <div class="left_sidebar">
             left
          </div>
          <div class="content">
             left
          </div>
          <div class="right_sidebar">
             right
          </div>
      </div><!-- main div -->
   </div> <!-- page div -->
</body>
</html>

我需要将块.main设置为100％页面高度，这是我的css：

html {
    height: 100%;
}
body {
    height: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}
.page {
    height: 100%;
    min-height: 100%;
    background-color: white;
    margin: 0 auto;
    padding: 0;
    width: 1084px;
}
.main {
  width: 1084px;
  height: 100%; // not working
}
.left_sidebar {
  float: left;
  max-width: 197px;
  height: auto;
}
.content {
  width: 517px;
  float: left;
}
.right_sidebar {
  width: 359px;
  float: right;
}

现在.main里面的文字显示在块之外，在Chrome中我可以看到这个块的宽度是1084但高度是0.我知道也许这个问题已经被问到了，但我想我错过了什么

通过互联网搜索this解决方案，但对我没有用

Answer 1

尝试使用此http://jsfiddle.net/7cZMh/2/

<强> HTML

<html>
<body>
  <div class="page">
      <div class="top_menu">
        some text
      </div>
      <div class='header'>
         menu
      </div>
      <div class="main">
          <div class="left_sidebar">
             left
          </div>
          <div class="content">
             left
          </div>
          <div class="right_sidebar">
             right
          </div>
      </div><!-- main div -->
   </div> <!-- page div -->
</body>
</html>

<强> CSS

html{
    min-height: 100%;
    position: relative;
}
body{
    height: 100%;
    overflow: hidden; // hide overflow
}
.page{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: maroon;
}
.main {
    height: 100%;
    background: black;
    overflow: auto; // restore overflow
}

哎呀，忘了这个。

.left_sidebar {
  float: left;
  max-width: 197px;
  height: auto;
}
.content {
  width: 517px;
  float: left;
}
.right_sidebar {
  width: 359px;
  float: right;
}

Answer 2

在页面加载后使用javascript给出高度给div添加id

<div class="page" id="myDiv">
....
</div>

在关闭body标签之前添加此脚本。

<script type="text/javascript">
document.getElementById("myDiv").style.height=screen.height;
</script>

Answer 3

将HTML和Body标签合并为一个并删除min-height似乎可以解决它：

html, body { height:100%; margin:0; padding:0; }

JSFiddle

如果您不想要滚动条，可以使用CSS3 border-box属性并使用边距和填充，如下所示：new JSFiddle。这应该适用于所有现代浏览器（IE8.0以下）。

将div块设置为100％高度

3 个答案: