为什么不设置高度：100％可将div扩展到屏幕高度？

295

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

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">

展开摘要

html css height

— 伯爵拉尔森
source

2

这是一个简单明了的解释：stackoverflow.com/a/31728799/3597276

— Michael Benjamin

对于嵌套的元素不应该延伸到整个窗口的高度可能是最好的解决方案 stackoverflow.com/questions/7049875/height-100-not-working/...

— B-大佬

409

为了使百分比值适合身高，必须确定父母的身高。唯一的例外是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示例。

— 马达拉的幽灵
source

23

好的，所以这可能会让我看起来非常愚蠢，但是无论如何：您是说这<html>是一个实际的元素-就像<p>还是<img />？我认为的唯一目的<html>是定义HTML文档的开头和结尾。我的意思是，我认为它在那里，而不是用于布局，而是为了让浏览器知道它正在查看的文档类型？我完全疯了。

— jay_t55

29

@Joey：HTML 是实际元素。您可以使用CSS设置样式，在JavaScript中挂钩事件，向其添加类和ID，然后它就会出现在DOM中。即使没有<html>标记，甚至没有<head>或<body>元素，浏览器都将假定HTML文档。但是，HTML规范将<html>标记视为必选标记。简而言之，是的，它像所有其他HTML元素一样是完整的元素。

— 马达拉的幽灵

1

@SecondRikudo：否，<html>根据规范（例如HTML4和HTML5），该标签是可选的。是的，无论如何都会创建该元素。

— 罗伯特·西默

2

嗯...对我来说，唯一的办法这工作是同时设置html和body为height: 100%（除了当然具体的div我想继承100％的高度）

— 詹姆斯

1

@james是的，所有父母必须有一个已知的身高。

— 马达拉的幽灵

146

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

现代方法：

除了将html/ body元素的高度都设置为之外100%，还可以使用视口百分比长度：

5.1.2。视口百分比长度：“ vw”，“ vh”，“ vmin”，“ vmax”单位

视口百分比长度相对于初始包含块的大小。更改初始包含块的高度或宽度时，将对其进行相应缩放。

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

body {
    height: 100vh;
}

设置min-height也可以。（例）

body {
    min-height: 100vh;
}

这些单元在大多数现代浏览器中均受支持- 支持可在此处找到。

— 乔什·克罗泽（Josh Crozier）
source

1

我完全没有看到任何好处。它是否为浏览器增加了额外的工作，需要计算与浏览器视口相关的所有内容？仅当您想实际调整与浏览器高度相关的大小时，视口大小调整才显得有用。

— 罗伯特·温特

12

@RobertWent有好处。例如，height: 100%仅当父元素具有定义的高度时才起作用。当然，在某些情况下，元素的父级没有定义的高度，并且视口百分比单位可以解决该问题。换句话说，如果您有一个深层嵌套的元素，则可以简单地设置100vh，它将具有100%浏览器的高度。您可能看不到任何好处，但是在很多情况下，我一直是唯一的解决方案。这些单位可能对html/ 等根元素不利body，但是，这是另一种选择

— Josh Crozier

2

但是，我们谈论的是身体元素，而不是深层嵌套的元素。仅有一个可能的父元素html元素。这就是为什么我提到我看不到任何好处，而且可能比设置100％更糟。您的评论并没有使我变瘦。仅仅因为新事物并不能使它变得更好。但是，这是另一种选择。

— 罗伯特·温特

4

这种方法的问题是iPhone从视图高度中排除了地址栏和底部导航，这意味着body { height: 100vh }在初始页面加载时将具有滚动条。

— BHOLT

2

真好我尝试了另一种方法，我将height: 100% !important" to each parent til html` 放不成功，我在dom中可以看到树的每个节点实际上都是，100%但是我无法设法在所需元素中设置100％，但是使用视口样式很容易

— pmiranda

25

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

html { height:100%; }

— 帽子
source

20

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

— 史蒂夫·陶伯
source

4

如果我不使用flexbox创建布局，那将是一个很好的解决方案。：/

— Landon致电

2

别忘了width:100%;和父母在一起position:relative;。

— 凯诺克

8

您应该尝试使用父元素。

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

这样就足够了：

#s7 {
   height: 100%;
}

— 姆本吉
source

5

例如，如果您想要左列（高度100％）和内容（高度自动），则可以使用absolute：

#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>

— 黄市场
source

2

这可能不是理想的方法，但是您始终可以使用javascript来实现。或者就我而言，jQuery

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

— Bo
source

5

当仅靠CSS就能满足要求时，绝对不要使用javascript。

— Bosworth99

1

为什么还要做这样的事情并使它变得比它本应的复杂呢？我不明白一些答案，大声笑...

— CapturedTree '18

1

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

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

如果将height值放在标记中，它将使用此值而不是css文件中定义的高度。

— 史蒂文
source

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

— Earl Larson

好的，虽然我不知道您如何获得上面的代码，但我还是将<div id =“ s7”>更改为<div id =“ s7” style =“ height：100％;”>并成功了。也许它对我隐藏了什么？无论哪种方式，谢谢:)

— Earl Larson

1

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

所以像这样：

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

— 基思·布朗
source

1

我看不到这是怎么回事，因为50％是相对于宽度而不是包含元素的高度，还是我在这里错过了一些东西？

— DrLightman '17

0

对于不想使用的人，这是另一种解决方案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>

展开摘要

— 米西尔
source