为什么 height: 100% 不能将 div 扩展到屏幕高度？答案

【问题标题】：Why doesn't height: 100% work to expand divs to the screen height?为什么 height: 100% 不能将 div 扩展到屏幕高度？
【发布时间】：2011-10-26 08:46:10
【问题描述】：

我希望轮播 DIV (s7) 扩展到整个屏幕的高度。我不知道为什么它没有成功。要查看该页面，您可以转到here。

body {
  height: 100%;
  color: #FFF;
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;
  background: #222 url('') no-repeat center center fixed;
  overflow: hidden;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.holder {
  height: 100%;
  margin: auto;
}
#s7 {
  width: 100%;
  height: 100%: margin: auto;
  overflow: hidden;
  z-index: 1;
}
#s7 #posts {
  width: 100%;
  min-height: 100%;
  color: #FFF;
  font-size: 13px;
  text-align: left;
  line-height: 16px;
  margin: auto;
  background: #AAA;
}

<div class="nav">
  <a class="prev2" id="prev2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">
  </a>
  <a class="next2" id="next2" href="#">
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">
  </a>
</div>

<div class="holder">
  <tr>
    <td>
      <div id="s7">
        {block:Posts}
        <div id="posts">

【问题讨论】：

这里有一个简单明了的解释：stackoverflow.com/a/31728799/3597276
对于不应拉伸到整个窗口高度的嵌套元素可能是最佳解决方案stackoverflow.com/questions/7049875/height-100-not-working/…
这能回答你的问题吗？ Percentage Height HTML 5/CSS

标签： html css height

【解决方案3】：

为了使百分比值适用于身高，必须确定父母的身高。唯一的例外是 root 元素 <html>，它可以是百分比高度。 .

所以，除了<html>，你已经给了你所有元素的高度，所以你应该做的是添加这个：

html {
    height: 100%;
}

您的代码应该可以正常工作。

* { padding: 0; margin: 0; }
html, body, #fullheight {
    min-height: 100% !important;
    height: 100%;
}
#fullheight {
    width: 250px;
    background: blue;
}

<div id=fullheight>
  Lorem Ipsum        
</div>

JsFiddle example.

【讨论】：

好的，所以这可能会让我看起来非常愚蠢，但是whatever：你的意思是说<html> 是一个实际元素吗？就像<p> 或<img />？我认为<html> 的唯一目的是定义 HTML 文档的开头和结尾。我的意思是，我认为它在那里，不是为了布局，而是为了让浏览器知道它正在查看的文档类型？我完全疯了。
@Joey：HTML 是一个实际的元素。您可以使用 CSS 对其进行样式设置，在 JavaScript 中将事件挂钩，向其添加类和 ID，然后它会出现在 DOM 中。即使没有<html> 标记，甚至没有<head> 或<body> 元素，浏览器也会假定一个HTML 文档。然而，HTML 规范认为<html> 标签是强制性的。简而言之，是的，它与所有其他 HTML 元素一样是一个成熟的元素。
@SecondRikudo：不，<html> 标签根据规范（例如 HTML4 和 HTML5）是可选的。是的，无论如何都会创建元素。
hmmm...对我来说，唯一可行的方法是将html和body设置为height: 100%（当然还有我想继承的特定div 100% 高度）
@james 是的，所有父母都必须有一个已知的身高。

【解决方案4】：

如果您想要，例如，左列（高度 100%）和内容（高度自动）你可以使用绝对：

#left_column {
    float:left;
    position: absolute;
    max-height:100%;
    height:auto !important;
    height: 100%;
    overflow: hidden;

    width : 180px; /* for example */
}

#left_column div {
    height: 2000px;
}

#right_column {
    float:left;
    height:100%;
    margin-left : 180px; /* left column's width */
}

在 html 中：

  <div id="content">
      <div id="left_column">
        my navigation content
        <div></div>
      </div>

      <div id="right_column">
        my content
      </div>
   </div>

【讨论】：

【解决方案5】：

这可能并不理想，但您始终可以使用 javascript 来实现。或者在我的情况下 jQuery

<script>
var newheight = $('.innerdiv').css('height');
$('.mainwrapper').css('height', newheight);
</script>

【讨论】：

当仅使用 css 就足够时，使用 javascript 绝不是一个好主意。
为什么还要做这样的事情并使其复杂化？我不明白一些答案大声笑...

【解决方案6】：

或者，如果您使用position: absolute，那么height: 100% 也可以正常工作。

【讨论】：

如果我不使用 flexbox 来创建我的布局，这将是一个很好的解决方案。 ://
别忘了设置width:100%;和父position:relative;。

【解决方案7】：

如果将元素绝对定位在 div 内，则可以将 padding top 和 bottom 设置为 50%。

所以是这样的：

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}

【讨论】：

我看不出这是如何工作的，因为 50% 是相对于宽度而不是包含元素的高度，还是我在这里遗漏了什么？

【解决方案8】：

_{由于没有人提到这个..}

现代方法：

作为将html/body 元素的高度都设置为100% 的替代方法，您还可以使用视口百分比长度：

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

视口百分比长度与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

在这种情况下，您可以使用值100vh（即视口的高度）-(example)

body {
    height: 100vh;
}

设置min-height 也可以。 (example)

body {
    min-height: 100vh;
}

大多数现代浏览器都支持这些单位 - support can be found here。

【讨论】：

我看不出这有什么好处。它不会为需要计算与浏览器视口相关的所有内容的浏览器创建额外的工作吗？仅当您想要实际调整与浏览器高度相关的大小时，视口大小调整似乎才有用。
@RobertWent 有好处。例如，height: 100% 仅在父元素具有定义的高度时才有效。在某些情况下，元素的父级没有定义的高度和视口百分比单位解决了这个问题。换句话说，如果你有一个深度嵌套的元素，你可以简单地设置100vh，它的高度就是浏览器的100%。您可能看不到任何好处，但我遇到过很多情况，它们是唯一的解决方案。这些单元可能对html/body 等根元素没有那么有益，但尽管如此，这是一种替代方法
但是我们说的是body元素，而不是深度嵌套的元素。只有一个可能的父元素，即 html 元素。这就是为什么我提到我没有看到任何好处，它可能比仅仅设置 100% 更糟糕。你的评论并没有让我变瘦。仅仅因为某些东西是新的并不能使它变得更好。然而，它是另一种选择。
这种方法的一个问题是 iPhone 从视图高度中排除了地址栏和底部导航，这意味着 body { height: 100vh } 在初始页面加载时会有一个滚动条。
不错。我尝试了另一种方法，我没有成功输入height: 100% !important" to each parent til html`，我可以在dom中看到树的每个节点实际上都是100%，但我无法在所需元素中设置100%，但是使用视口样式很容易

【解决方案9】：

您应该尝试使用父元素；

html, body, form, main {
    height: 100%;
}

那么这就足够了：

#s7 {
   height: 100%;
}

【讨论】：

【解决方案10】：

对于不想使用html, body, .blah { height: 100% } 的人来说，这是另一种解决方案。

.app {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow-y: auto;
}

.full-height {
  height: 100%;
}

.test {
  width: 10px;
  background: red;
}

<div class="app">
  <div class="full-height test">
  </div>
  Scroll works too
</div>

【讨论】：

【解决方案11】：

尝试使用calc 和overflow 函数

.myClassName {
    overflow: auto;
    height: calc(100% - 1.5em);
}

【讨论】：