1. ホーム
  2. ハイパーリンク

[解決済み】画面の高さに合わせてdivを展開するheight: 100% が機能しないのはなぜですか?

2022-03-24 07:28:10

質問

カルーセル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">

解決方法は?

高さに対してパーセント値が機能するためには、親の高さが決定されている必要があります。唯一の例外は ルート 要素 <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の例 .