html - 为什么高度不是: 100% work to expand divs to the screen height?

标签 html css height

我想让轮播 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">

最佳答案

为了使百分比值适用于高度,必须确定 parent 的高度。唯一的异常(exception)是 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 .

关于html - 为什么高度不是: 100% work to expand divs to the screen height?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50470839/

相关文章:

javascript - 如何在 ng-repeat 中显示数组的特定字母表项?

html - 悬停菜单消失得太快

android - Css 媒体查询方向 :landscape in android web view not working properly

html - 形式低于所有其他李的李元素

css - 100% 高度内容 <div> 带有粘性页脚

jquery - 使用 jQuery 调整父元素的高度以匹配其可见子元素的高度

html - 较厚的边框与模板

javascript - 在变量中存储最近的和 parent 在 Internet Explorer 中不起作用

css - 用覆盖 mask div,防止 mask 滚动

html - 我网站上的 firefox 用户出现奇怪的黑条