將響應式方塊放置在彈性列中
P粉545682500
2023-09-03 19:51:51
<p>我有一個遊戲網站,其中有頁首、棋盤和頁尾。我需要將所有三個都安裝在視口內。棋盤應該縮小才能實現這一點。 </p>
<p>縮小是我遇到的問題。我已經能夠獲得寬度響應,但無法獲得限制性高度。 </p>
<p>棋盤應保持正方形並佔據未使用的空間或縮小以防止溢出。 </p>
<p>我正在按照以下方式做一些事情,但是棋盤最終會溢出父級的高度。 </p>
<p>在我的實際程式碼中,由於換行,標題的高度是未知的。頁腳有不同數量的文字。棋盤內部有一系列代表行的 div 和一系列代表棋盤各個方格的子元素。正方形有長寬比</p>
<p>
<pre class="brush:css;toolbar:false;">.parent {
height: 100vh;
background-color: grey;
display: flex;
flex-direction: column;
}
.header {
height: 10px;
background-color: blue;
}
.child {
background-color: red;
flex: 1 1 auto;
}
.chessboard {
width: 100%;
max-height: 100%;
aspect-ratio: 1/1;
background-color: purple;
margin: auto;
}
.footer {
height: 10px;
background-color: green;
}</pre>
<pre class="brush:html;toolbar:false;"><div class="parent">
<div class="header">
</div>
<div class="child">
<div class="chessboard">
</div>
</div>
<div class="footer">
</div>
</div></pre>
</p>
<p>感謝任何幫助。 </p>
你有
aspect-ratio
告訴棋盤具有與寬度相同的高度,所以如果你的寬度是3000px,你的高度將是相同的。你有選擇最終答案取決於您的一些澄清。我在這個問題的評論中問過你。但我會給出一個通用的答案。
我將簡要解釋下面範例中所做的事情。
我創建了一個
.chessboard-wrapper
,其中有一個。
根據需要進行縮放,並具有
aspect-ratio: 1;
。.chessboard
本身俱有position:absolute;
並將採用父親的尺寸。