レスポンシブ ブロックをフレックス列に配置する

Question

<p>ヘッダー、ボード、フッターがあるゲーム Web サイトを持っています。 3 つすべてがビューポート内に収まるようにする必要があります。これを実現するには基板を小さくする必要があります。 </p> <p>縮小化が私が抱えている問題です。幅を応答させることはできましたが、高さを制限することはできませんでした。 </p> <p>ボードは正方形のままで未使用のスペースを占めるか、オーバーフローを防ぐために縮小する必要があります。 </p> <p>以下のようなことをやっているのですが、ボードが親の高さからはみ出してしまいます。 </p> <p>実際のコードでは、行の折り返しによりタイトルの高さが不明です。フッターにはさまざまな量のテキストが含まれます。チェス盤の内部には、行を表す一連の div と、チェス盤の正方形を表す一連の子要素があります。正方形のアスペクト比は

です。 <p> <pre class="brush:css;toolbar:false;">.parent { 高さ: 100vh; 背景色: グレー; ディスプレイ: フレックス; フレックス方向: 列; } .header { 高さ: 10px; 背景色: 青; } 。子供 { 背景色: 赤; フレックス: 1 1 自動; } .チェス盤 { 幅: 100%; 最大高さ: 100%; アスペクト比: 1/1; 背景色: 紫; マージン: 自動; } .フッター { 高さ: 10px; 背景色: 緑; }</pre> <pre class="brush:html;toolbar:false;"><div class="parent"> <div class="ヘッダー"> </div> <div class="子"> <div class="チェス盤"> </div> </div> <div class="フッター"> </div> </div></pre> </p> <p>ご協力いただきありがとうございます。 </p>

Answer 1

アスペクト比でボードに幅と同じ高さを持たせるように指示しているため、幅が 3000 ピクセルの場合、高さは同じになります。あなたには選択肢があります

1. アスペクト比を削除
2. 私の例では、子ラッパー要素を削除します
3. チェス盤の最大高さを設定します

リーリー リーリー

Answer 2

最終的な答えは、あなたの側の説明に依存します。この質問に対してコメントで質問させていただきました。しかし、私は一般的な答えをします。

以下の例で何が行われるかを簡単に説明します。
を含む .chessboard-wrapper を作成しました。 必要に応じて、アスペクト比: 1; で拡大縮小します。
.chessboard 自体には position:absolute; があり、親のサイズを取得します。

リーリー リーリー