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

小编典典

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

html

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

阅读 431

2020-05-10

共1个答案

小编典典

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

2020-05-10