为什么height: 100%无法将div扩展到屏幕高度？

Question

为什么height: 100%无法将div扩展到屏幕高度？

446

我希望 carousel 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">

- Earl Larson

7

这是一个简单明了的解释：https://dev59.com/51wZ5IYBdhLWcg3wM97Z#31728799 - Michael Benjamin

可能是嵌套元素不应该拉伸到整个窗口高度的最佳解决方案。 - B-GangsteR

这个回答解决了你的问题吗？百分比高度HTML 5/CSS - the Hutt

我是唯一一个注意到发布的CSS无效的人吗？height: 100%: margin: auto; 是无效的。100%后面的冒号应该是分号。不管怎样，是的，为了使百分比起作用，它需要知道它是百分之几。我会使用视口高度。像100vh;这样。 - Thomas Fitzgerald

在Tailwind中，您可以设置h-screen，这意味着在CSS中是height: 100vh;。 - onmyway133

12个回答

218

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

现代方法:

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

5.1.2. 视口百分比长度：‘vw’、‘vh’、‘vmin’、‘vmax’ 单位

视口百分比长度是相对于初始包含块的大小而言的。当初始包含块的高度或宽度更改时，它们会相应缩放。

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

body {
    height: 100vh;
}

设置min-height也有效。 (示例)

body {
    min-height: 100vh;
}

这些单位在大多数现代浏览器中都受到支持 - 可以在此处找到支持情况（链接）。

- Josh Crozier

19

@RobertWent 这样做有好处。例如，只有父元素有定义的高度时，height: 100% 才能起作用。在某些情况下，元素的父级没有定义高度，而视口百分比单位可以解决这个问题。换句话说，如果你有一个深层嵌套的元素，你可以简单地设置为 100vh，它将具有浏览器高度的 100％。也许你看不出任何好处，但我遇到过很多只有使用这种方式才能解决问题的情况。这些单位对于 html / body 等根元素可能没有那么有益，但无论如何，这是一种替代方法。 - Josh Crozier

2

但是我们正在讨论body元素，而不是一个深度嵌套的元素。只有一个可能的父元素，那就是html元素。这就是为什么我提到我看不到任何好处，并且可能比仅设置100％更糟糕的原因。您的评论没有说服我改变想法。仅仅因为某些东西是新的并不意味着它更好。不过它是一种替代方案。 - Robert Went

1

viewport-percentage lengths的定义是误导性的。实际上，它只是指大多数情况下视口的大小，即浏览器窗口的大小。 - B-GangsteR

4

使用这种方法的一个问题是iPhone会将地址栏和底部导航排除在视图高度之外，这意味着body { height: 100vh }在初始页面加载时会出现滚动条。 - bholtbholt

2

不错。我尝试了另一种方法，将 height: 100% !important 应用到每个父元素直到 html，但没有成功。我可以在 DOM 中看到树的每个节点实际上都是 100%，但我无法将其设置为所需元素的 100%。但使用视口样式很容易实现。 - pmiranda

显示剩余7条评论

30

还需要在 html 元素上设置 100% 的高度：

html { height:100%; }

- shanethehat

29

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

- Steve Tauber

11

如果我没有使用 flexbox 来创建布局，那么这将是一个很好的解决方案。:/ - Parzi

3

别忘记设置 width:100%; 和父元素的 position:relative;。 - Avatar

11

你应该尝试使用父元素；

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

那么这就足够了：

#s7 {
   height: 100%;
}

- Bengi Besçeli

6

如果您想要一个左侧列（高度为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>

- YellowMart

2

如果您将div内的元素绝对定位，可以将padding top和bottom设置为50%。因此，类似这样的代码：

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

- Keith Brown

1

我不明白这个怎么可能行得通，因为50%是相对于包含元素的宽度而不是高度，或者我在这里漏掉了什么？ - DrLightman

2

只需在您的css中使用这个。

html, body {
   height: 100%;
}

您将能够看到所有子类的100%高度。

- Pratik Kabade

2

对于不想使用 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>

- TheMisir

1

在页面源代码中，我看到了以下内容：

<div class="holder"> 
    <div id="s7" style="position: relative; width: 1366px; height: 474px; overflow: hidden;">

如果您在标签中设置了高度值，它将使用此值而不是在CSS文件中定义的高度。

- Steven

这很奇怪，因为这是我在页面源代码中看到的：<div class="holder"> <tr><td> <div id="s7">

- Earl Larson

好的，虽然我不知道你是怎么得到上面的代码的，但我进去把<div id="s7">改成了<div id="s7" style="height:100%;">，它就可以工作了。也许它对我隐藏了什么？无论如何，谢谢 :) - Earl Larson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Madara's Ghost · Accepted Answer

578

为了让百分比高度起作用，必须确定父元素的高度。唯一的例外是根元素 <html>，它可以具有百分比高度。

所以，您已经给所有元素指定了高度，除了 <html>，所以您应该添加以下内容：

html {
    height: 100%;
}

And your code should work fine.

* { 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示例。

- Madara's Ghost

39

好的，这可能让我看起来非常愚蠢，但是——无所谓——你的意思是说<html>就像<p>或<img/>一样是一个真正的元素吗？我原本以为<html>的唯一目的是定义HTML文档的开头和结尾。我的意思是，我认为它存在的目的不是为了布局，而是为了让浏览器知道它正在查看什么类型的文档？我完全被震惊了。 - jay_t55

40

@Joey: HTML本身就是一个实际的元素。你可以使用CSS样式它，在JavaScript中挂接事件，为它添加类和ID，它也会出现在DOM中。即使没有<html>标签，甚至没有<head>或<body>元素，浏览器也会默认它是一个HTML文档。然而，HTML规范认为<html>标签是必须的。简言之，像其他所有HTML元素一样，它是一个完整的元素。 - Madara's Ghost

3

根据规范（如HTML4和HTML5），<html>标签是可选的。但是，该元素仍然会被创建。 - Robert Siemer

3

对我而言，唯一可行的方法是将 html 和 body 都设置为 height: 100%（当然还有我想要继承 100% 高度的特定 div） - james

1

为了消除一些混乱：在HTML文件中，<html>、<head>和<body>的标记是可选的，但元素总是会被构建。当DOM被构建时，定义上始终会有 html、head 和 body 元素，这三个元素也总是按照 html[head,body] 的顺序排列。因此，即使您没有使用 <html> ...</html> 编写任何标记，任何涉及到 html 元素的CSS或JS都能正常工作，因为该元素保证存在于您的DOM中。 - Mike 'Pomax' Kamermans

显示剩余4条评论