将 div 块设置为 100% 高度答案

【问题标题】：Set div block to 100% height将 div 块设置为 100% 高度
【发布时间】：2017-11-21 16:49:34
【问题描述】：

我有这样的标记：

<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 解决方案，对我不起作用

【问题讨论】：

为什么使用相同值的最小高度和高度？
我只是看到你在 class="main" 中漏掉了一个 "
只是尝试了不同的选项，其中的示例可以在互联网上找到，我并没有错过"编辑
这将帮助您修复它...stackoverflow.com/questions/1622027/…
我在下面编辑了我的答案，包括对所有现代浏览器的修复。 Michal 的解决方案存在严重缺陷，当内容达到容器的限制时，它将被隐藏。我给出的（完全 CSS）解决方案将根据需要滚动，但在不应该显示滚动条时不显示。

标签： html css height

【解决方案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;
}

【讨论】：

这个解决方案有个很大的缺陷，就是使用overflow:hidden;会隐藏内容。（例如：jsfiddle.net/7cZMh/3）要解决这个问题，您需要使用边距和填充，但您最初的问题没有说明没有滚动条。
@JamesDonnelly 你是对的（部分），但没有必要添加边距或填充。我调整了 CSS 以正确处理内容块中的溢出。

【解决方案2】：

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

为 div 提供 id

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

并在关闭body标签之前添加这个脚本。

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

【讨论】：

我认为这是个坏主意，我想用 css 来做

【解决方案3】：

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

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

JSFiddle.

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

【讨论】：

它会导致滚动条出现。
当然可以。如果页面为 800px 高且元素设置为 100% 高度，则元素将为 800px 高。原始问题中没有任何地方声明不应出现滚动条。