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

html CSS

伽罗

2020-03-24

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

第3153篇《为什么不设置高度：100％可将div扩展到屏幕高度？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共6个回答
小胖番长 2020.03.24

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

所以像这样：

#s7 {
    position: relative;
    width:100%;
    padding: 50% 0;
    margin:auto;
    overflow: hidden;
    z-index:1;
}
卡卡西小宇宙 2020.03.24

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

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

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

米亚L 2020.03.24

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

html { height:100%; }
伽罗理查德 2020.03.24

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

宝儿理查德 2020.03.24

您应该尝试使用父元素。

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

这样就足够了：

#s7 {
   height: 100%;
}
猴子西门 2020.03.24

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android