レスポンシブ ブロックをフレックス列に配置する
<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>
