问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

社区维基
1
新手上路，请多包涵

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

原文由 Earl Larson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssheight
阅读 380
2 个回答
得票最新
社区维基
1
✓ 已被采纳

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

原文由 Madara‘s Ghost 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

因为没有人提到这个..

现代方法：

作为将 html / body 元素的高度设置为 --- 的替代方法，您还可以使用 percentage length 100% ：

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

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

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

 body {
    height: 100vh;
}

设置 min-height 也有效。 （例子）

 body {
    min-height: 100vh;
}

大多数现代浏览器都支持这些单位—— 支持可以在这里找到。

原文由 Josh Crozier 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题