コンテナCSS3の最大高さを適用する

Question

私はサイモンゲームクローンのスケルトンを構築することでほぼ完成しました。私がしたい唯一の左はコンテナ（ゲーム自体を保持します）の最大高さは605pxです。

ビューポートで特定のしきい値に達したときにその幅の最大値を達成することはできましたが、同じ動作を適用するのは困難ですが、代わりに水平方向に適用するのは困難です。

すべての入力をいただければ幸いです。

私もCodePenで私のコードを添付しました

：

http://codepen.io/neotriz/pen/RRxOJb

body { 
 
    background: skyblue; 
 
    font-family: 'Righteous', cursive; 
 
    box-sizing: border-box; } 
 

 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; } 
 

 
.game { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
    height: 70vh; 
 
    margin-top: 10px; } 
 

 
.button { 
 
    position: relative; 
 
    display: block; 
 
    height: 50%; 
 
    width: 50%; 
 
    margin-bottom: 1px; } 
 

 
#green { 
 
    background: #39d565; 
 
    border-top-left-radius: 25%; 
 
    box-shadow: 0 6px 0 #0d934b; 
 
    bottom: 6px; 
 
    transition: all 0.1s linear; } 
 
    #green:active { 
 
    bottom: 0px; 
 
    box-shadow: 0px 0px 0px #0d934b; } 
 

 
#red { 
 
    background: #d23a51; 
 
    border-top-right-radius: 25%; 
 
    box-shadow: 0 6px 0 #711515; 
 
    bottom: 6px; 
 
    transition: all 0.1s linear; } 
 
    #red:active { 
 
    bottom: 0px; 
 
    box-shadow: 0px 0px 0px #711515; } 
 

 
#blue { 
 
    background: #09f; 
 
    border-bottom-left-radius: 25%; 
 
    box-shadow: 0 6px 0 #06c; 
 
    bottom: 6px; 
 
    transition: all 0.1s linear; } 
 
    #blue:active { 
 
    bottom: 0px; 
 
    box-shadow: 0px 0px 0px #06c; } 
 

 
#yellow { 
 
    background: #FD9A01; 
 
    border-bottom-right-radius: 25%; 
 
    box-shadow: 0 6px 0 #916828; 
 
    bottom: 6px; 
 
    transition: all 0.1s linear; } 
 
    #yellow:active { 
 
    bottom: 0px; 
 
    box-shadow: 0px 0px 0px #916828; } 
 

 
.score { 
 
    width: 100%; 
 
    height: 10vh; 
 
    text-align: center; 
 
    color: #FFF; 
 
    text-shadow: 1px 3px 2px black; 
 
    margin-bottom: 5px; } 
 

 
.control-panel { 
 
    text-align: center; 
 
    width: 100%; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    position: relative; 
 
    height: 15vh; 
 
    align-items: center; 
 
    justify-content: center; 
 
    background: #aaaaaa; 
 
    border-radius: 10px; } 
 
    .control-panel #on-off-btn { 
 
    width: 33.3333%; } 
 
    .control-panel #level { 
 
    width: 33.3333%; } 
 
    .control-panel #start { 
 
    width: 33.3333%; } 
 
    .control-panel p { 
 
    margin: 8px 0px 0px 0px; } 
 

 
.cmn-toggle { 
 
    position: absolute; 
 
    margin-left: -9999px; 
 
    visibility: hidden; } 
 

 
.cmn-toggle + label { 
 
    display: block; 
 
    position: relative; 
 
    cursor: pointer; 
 
    outline: none; 
 
    user-select: none; } 
 

 
input.cmn-toggle-round + label { 
 
    padding: 2px; 
 
    max-width: 90%; 
 
    height: 35px; 
 
    background-color: #dddddd; 
 
    border-radius: 60px; 
 
    margin-top: 9px; 
 
    margin-left: 5px; } 
 

 
input.cmn-toggle-round + label:before, 
 
input.cmn-toggle-round + label:after { 
 
    display: block; 
 
    position: absolute; 
 
    top: 1px; 
 
    left: 1px; 
 
    bottom: 1px; 
 
    content: ""; } 
 

 
input.cmn-toggle-round + label:before { 
 
    right: 1px; 
 
    background-color: white; 
 
    border-radius: 60px; 
 
    transition: background 0.4s; } 
 

 
input.cmn-toggle-round + label:after { 
 
    width: 38px; 
 
    background-color: #fff; 
 
    border-radius: 100%; 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); 
 
    transition: margin-left 0.4s; } 
 

 
input.cmn-toggle-round:checked + label:before { 
 
    background-color: #8ce196; } 
 

 
input.cmn-toggle-round:checked + label:after { 
 
    margin-left: 58%; } 
 

 
.btn-round { 
 
    width: 50%; 
 
    height: 50px; 
 
    background: #ed2914; 
 
    border-radius: 100%; 
 
    outline: none; 
 
    box-shadow: 0 6px 0 #711515; 
 
    bottom: 6px; 
 
    transition: all 0.1s linear; } 
 
    .btn-round:active { 
 
    bottom: 0px; 
 
    box-shadow: 0px 0px 0px #711515; } 
 

 
@media screen and (max-width: 311px) { 
 
    input.cmn-toggle-round:checked + label:after { 
 
    margin-left: 45%; } } 
 

 
@media screen and (min-width: 426px) { 
 
    .container { 
 
    width: 426px; 
 
    margin-left: auto; 
 
    margin-right: auto; } 
 
    input.cmn-toggle-round:checked + label:after { 
 
    margin-left: 66%; } } 
 

 
@media screen and (min-height: 605px) { 
 
    .container { 
 
    height: 605px; } }

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <title>Simon Game FCC</title> 
 
    </head> 
 
    <body> 
 
    <div class="container"> 
 
     <div class="game"> 
 
     <div id="green" class="button"></div> 
 
     <div id="red" class="button"></div> 
 
     <div id="blue" class="button"></div> 
 
     <div id="yellow" class="button"></div> 
 
     </div> 
 
     <div class="score"> 
 
     <h2>Score: 0 </h2> 
 
     </div> 
 
     <div class="control-panel"> 
 
     <div id="on-off-btn"> 
 
      <input id="on-off-slider"type="checkbox" class="cmn-toggle cmn-toggle-round"> 
 
      <label for="on-off-slider"></label> 
 
      <p>Off/On</p> 
 
     </div> 
 
     <div id="level"> 
 
      <input id="level-slider"type="checkbox" class="cmn-toggle cmn-toggle-round"> 
 
      <label for="level-slider"></label> 
 
      <p>Level</p> 
 
     </div> 
 
     <div id="start"> 
 
      <button class="btn-round"></button> 
 
      <p>(re)Start</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Answer 1

落札ので、私はvh高さとflex処分を混合して、問題の一部だと思います調整するのが少し面倒です。だから私はコンテナ内のすべてのvhの高さを取り除き、flex垂直ポジションに置き換えることを提案します。ここで

は私が得るSCCSである（のみ変更されたルールはここにある）：

.container { 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    height: 100vh; 
    flex-direction: column; 
    justify-content: center; } 

.game { 
    display: flex; 
    flex-wrap: wrap; 
    width: 100%; 
    margin-top: 10px; 
    flex: 1 1 auto; } 

.score { 
    width: 100%; 
    text-align: center; 
    color: #FFF; 
    text-shadow: 1px 3px 2px black; 
    margin-bottom: 5px; 
    flex: 0 0 auto; } 

.control-panel { 
    text-align: center; 
    width: 100%; 
    display: flex; 
    flex-wrap: wrap; 
    position: relative; 
    align-items: center; 
    justify-content: center; 
    background: #aaaaaa; 
    border-radius: 10px; 
    flex: 0 0 auto; }