在容器CSS3上应用最大高度
[英]applying max-height on container CSS3
问题描述
我几乎完成了构建simon游戏克隆的框架，我唯一要做的就是将容器（保存游戏本身）的最大高度设置为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>
1 个解决方案
解决方案1
0 2016-07-17 09:23:45
我认为混合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; }
CSS同时为图像应用Max-height和Auto height属性
[英]CSS applying Max-height and Auto height property at the same time for an image
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.