將響應式方塊放置在彈性列中
P粉545682500
P粉545682500 2023-09-03 19:51:51
0
2
567
<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>
P粉545682500
P粉545682500

全部回覆(2)
P粉458913655

你有aspect-ratio告訴棋盤具有與寬度相同的高度,所以如果你的寬度是3000px,你的高度將是相同的。你有選擇

  1. 刪除縱橫比
  2. 在我的範例中,刪除子包裝元素
  3. 設定棋盤的最大高度

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  flex-shrink: 0;
  height: 10px;
  background-color: blue;
}

.child {
  flex-grow: 1;
  background-color: lightcoral;
}

.chessboard {
  height: 100%;
  max-height: 100%;
  background-color: purple;
  margin: auto;
}

.footer {
  flex-shrink: 0;
  height: 10px;
  background-color: green;
}
<div class="parent">
  <header class="header">
  </header>

  <div class="child">
    <div class="chessboard">
      main
    </div>
  </div>

  <footer class="footer">
  </footer>
</div>
P粉034571623

最終答案取決於您的一些澄清。我在這個問題的評論中問過你。但我會給出一個通用的答案。

我將簡要解釋下面範例中所做的事情。
我創建了一個 .chessboard-wrapper ,其中有一個 根據需要進行縮放,並具有 aspect-ratio: 1;
.chessboard 本身俱有 position:absolute; 並將採用父親的尺寸。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.parent {
  height: 100vh;
  background-color: grey;
  display: flex;
  flex-direction: column;
}

.header {
  height: 10px;
  background-color: blue;
  flex: none;
}

.child {
  background-color: red;
  flex: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.chessboard-wrapper {
  position: relative;
  min-height: 0;
  margin: auto;
  aspect-ratio: 1;
}

.chessboard-wrapper > canvas {
  max-width: 100%;
  max-height: 100%;
}

.chessboard {
  position: absolute;
  inset: 0;
  background-color: purple;
}

.footer {
  height: 10px;
  background-color: green;
  flex: none;
}
<div class="parent">
  <div class="header"></div>
  <div class="child">
    <div class="chessboard-wrapper">
      <canvas width="1000000" height="1000000"></canvas>
      <div class="chessboard"></div>
    </div>
  </div>
  <div class="footer"></div>
</div>
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!