为什么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个回答

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

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

- oBo · Answer 1

这可能不是最理想的方法，但你总可以用JavaScript来实现它。或者在我的情况下使用jQuery。

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

- BirukTes · Answer 2

尝试玩一下calc和overflow函数

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