设置DIV块，以100％的高度

-1

<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解决方案，并没有为我工作

来源

2013-02-14 Peter Popelyshko

为什么使用最小高度和高度的值相同？ – Niklas 2013-02-14 11:28:45

我只是看到你错过了“in class =”main“ – Niklas 2013-02-14 11:30:30

只是尝试了不同的选项，其中的例子在互联网上找到，我不会错过'''编辑 – 2013-02-14 11:34:10

尝试使用此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-14 11:39:07 Mike

这对我有用，尝试了与你一样的解决方案，但似乎我忘记了'overflow：hidden' – 2013-02-14 11:45:22

该解决方案存在一个很大的缺陷，即使用overflow：hidden;会隐藏内容。（例如：http://jsfiddle.net/7cZMh/3/）要解决此问题，您需要使用边距和填充，但您的原始问题没有说明没有滚动条。 – 2013-02-14 11:50:58

@JamesDonnelly你是对的（部分），但没有必要添加边距或填充。我调整了CSS以正确处理内容块中的溢出。 – Mike 2017-11-21 08:52:23

用JavaScript来给予高度在页面加载后

给id来div的

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

和关闭前添加这个脚本身体标签。

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

来源

2013-02-14 11:34:36

我认为这个不好主意，我想在css中做它 – 2013-02-14 11:35:34

结合你的HTML和BODY标签为一个和删除最小高度似乎解决它：

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

JSFiddle。

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

来源

2013-02-14 11:35:20

它会导致滚动条出现。 – Mike 2013-02-14 11:45:16

当然是的。如果页面高度为800px，并且元素高度设置为100％，则元素高度为800px。在原始问题中没有任何地方说明滚动条不应该出现。 – 2013-02-14 11:46:25

设置DIV块，以100％的高度

回答

相关问题