0

我有这样的标记：

<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。我知道这个问题可能已经被问过了，但我想我错过了一些东西。

通过互联网搜索尝试了此解决方案，对我不起作用

4

3 回答 3

2

尝试使用这个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;
}
于 2013-02-14T11:39:07.883 回答
0

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

给 id 给 div

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

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

<script type="text/javascript">
document.getElementById("myDiv").style.height=screen.height;
</script>
于 2013-02-14T11:34:36.390 回答
0

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

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

JSF中。

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

于 2013-02-14T11:35:20.070 回答