<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>