Divコンテナの高さのパーセンテージが正しく動作しない

Question

これは定期的な質問ですが、私はすでに見渡しています。どのように動作するのかを理解しています。現在私は体のためにheight:100%、htmlのためにmin-height: 100%を持っています。私が正しいとすれば、私の直系の親が身体である＃折り返しの高さのパーセンテージが働くはずです。その後、.containerという別のdivが#bigwrapにありますが、.containerの高さをパーセンテージで増やすと、高さがまったく増えません。身長を自由に増やしたいと思っています。このスニペットは実際の高さをカバーしていません。私は実際に#bigwrapの前に来るナビゲーションを持っています。私が持っているもう一つの質問は、ナビゲーション自体がボディの '100％'の高さの一部としてカウントされないので、ナビゲーション後にdivに置くと100％の高さがどのように働くのでしょうか？また、この問題はモバイルとデスクトップの両方で発生しています。それは、常に画面の残りの高さであるため、私はそれを60％の高さに縮小することはできません。

* { 
 
    margin: 0; 
 
} 
 

 
body { 
 
    height: 100%; 
 
    background-color: green; 
 
} 
 

 
html { 
 
    min-height: 100%; 
 
} 
 

 
#bigwrap { 
 
    position: relative; 
 
    height: 70%;; 
 
} 
 

 
.container { 
 
    display: flex; // 
 
    position: absolute; 
 
    flex-wrap: wrap; 
 
    justify-content: center; 
 
    align-items: flex-start; 
 
    height: 100%; 
 
    width: 70%; 
 
    margin: auto; // 
 
    top: 40%; // 
 
    left: 50%; // 
 
    transform: translate(-50%, -50%); 
 
    background-color: white; 
 
} 
 

 
.left, .middle, .right { 
 
    border-right: 1px solid blue; 
 
} 
 

 
.left { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    align-items: center; 
 
    justify-content: space-around; 
 
    order: 1; // 
 
    background: red; 
 
    flex: 1 20%; 
 
    height: 100%; 
 
} 
 

 
.left img { 
 
    max-width: 100%; 
 
} 
 

 
.middle { 
 
    display: flex; 
 
    flex-flow: column wrap; 
 
    order: 2; // 
 
    background: green; 
 
    flex: 2 20%; 
 
    height: 100%; 
 
} 
 

 
.right { 
 
    text-align: center; 
 
    order: 3; // 
 
    background: yellow; 
 
    flex: 1 20%; 
 
    height: 100%; 
 
} 
 

 
.right .headbox { 
 
    border-bottom: 1px solid orange; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.right .list { 
 
    text-align: center; 
 
    margin: auto; 
 
    width: 60%; 
 
    height: auto; 
 
} 
 

 
.list ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
.list a { 
 
    text-decoration: none; 
 
    color: inherit; 
 
} 
 

 
.headbox h3 { 
 
    color: orange; 
 
} 
 

 
@media all and (max-width: 500px) { 
 
    .container { 
 
     flex-flow: row wrap; 
 
     height: 100%; 
 
    } 
 
    .left img { 
 
     height: 80px; 
 
     width: 80px; 
 
    } 
 
    .left, .right, .middle { 
 
     flex: 1 100%; 
 
    } 
 
    div.logo { 
 
     margin: 0 auto; 
 
     width: 30%; 
 
     height: auto; 
 
     text-align: center; 
 
    } 
 
    * { 
 
     margin: 0; 
 
    } 
 
    #bigwrap { 
 
     position: relative; 
 
     height: 100%; 
 
    } 
 
    .container { 
 
     display: flex; // 
 
     position: absolute; 
 
     position: relative; 
 
     flex-wrap: wrap; 
 
     justify-content: center; 
 
     align-items: flex-start; 
 
     height: 60%; 
 
     width: 70%; 
 
     margin: auto; 
 
     background-color: white; 
 
    } 
 
    .left, .middle, .right { 
 
     border-right: 1px solid blue; 
 
    } 
 
    .left { 
 
     display: flex; 
 
     flex-flow: column wrap; 
 
     align-items: center; 
 
     justify-content: space-around; 
 
     order: 1; // 
 
     background: red; 
 
     flex: 1 20%; 
 
     height: 100%; 
 
    } 
 
    .left img { 
 
     max-width: 100%; 
 
    } 
 
    .middle { 
 
     display: flex; 
 
     flex-flow: column wrap; 
 
     order: 2; // 
 
     background: green; 
 
     flex: 2 20%; 
 
     height: 100%; 
 
    } 
 
    .right { 
 
     text-align: center; 
 
     order: 3; 
 
     flex: 1 20%; 
 
     height: 100%; 
 
    } 
 
    .right .headbox { 
 
     border-bottom: 1px solid orange; 
 
     margin: auto; 
 
     width: 60%; 
 
     height: auto; 
 
    } 
 
    .right .list { 
 
     text-align: center; 
 
     margin: auto; 
 
     width: 60%; 
 
     height: auto; 
 
    } 
 
    .list ul { 
 
     list-style: none; 
 
     padding: 0; 
 
    } 
 
    .list a { 
 
     text-decoration: none; 
 
     color: inherit; 
 
    } 
 
    .headbox h3 { 
 
     color: orange; 
 
    } 
 
    @media all and (max-width: 500px) { 
 
     .box img { 
 
      max-width: 100%; 
 
      margin-bottom: 9%; 
 
     } 
 
     .container { 
 
      flex-flow: row wrap; 
 
      height: 100%; 
 
     } 
 
     .left img { 
 
      height: 80px; 
 
      width: 80px; 
 
     } 
 
     .left, .right, .middle { 
 
      flex: 1 100%; 
 
     } 
 
    } 
 
}

<div id="bigwrap"> 
 

 
    <div class="container"> 
 
     <div class="left"> 
 
      <img src="cat1.jpeg" alt="Picture of kid" /> 
 
      <img src="cat1.jpeg" alt="Picture of kid" /> 
 
     </div> 
 
     <div class="middle"> 
 
      <div class="box"> 
 
       <p>Sample text. Sample text. Sample text. Sample 
 
        text. Sample text. Sample text. Sample text. 
 
        Sample text. Sample text. Sample text. Sample 
 
        text. Sample text. Sample text. Sample text. 
 
        Sample text. Sample text. Sample text. Sample 
 
        text.</p> 
 
      </div> 
 
      <div class="box"> 
 
       <p>Sample text. Sample text. Sample text. Sample 
 
        text. Sample text. Sample text. Sample text. 
 
        Sample text. Sample text. Sample text. Sample 
 
        text. Sample text. Sample text. Sample text. 
 
        Sample text. Sample text. Sample text. Sample 
 
        text.</p> 
 
      </div> 
 
      <div class="box"> 
 
       <p>Sample text. Sample text. Sample text. Sample 
 
        text. Sample text. Sample text. Sample text. 
 
        Sample text. Sample text. Sample text. Sample 
 
        text. Sample text. Sample text. Sample text. 
 
        Sample text. Sample text. Sample text. Sample 
 
        text.</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="right"> 
 
      <div class="headbox"> 
 
       <h3>Visit Us</h3> 
 
      </div> 
 
      <div class="list"> 
 
       <ul> 
 
        <li><a href="#">Home</a></li> 
 
        <li><a href="#">Hours</a></li> 
 
        <li><a href="#">Plan</a></li> 
 
        <li><a href="#">Directions</a></li> 
 
       </ul> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

#bigwrap { 
    position: relative; 
    height: 70%;; //only need one semi-colon 
} 

高さは、2つのセミコロンを有しています。しかし、それはまだ動作しない可能性があります。だから、それは仕事をdoesntの場合、この試してみてください。

body, html { 
    height: 100%; 
} 

最小の高さや高さ、あるいは単に高さを100％に設定する必要があります。