レスポンシブ ブロックをフレックス列に配置する
P粉545682500
2023-09-03 19:51:51
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
アスペクト比でボードに幅と同じ高さを持たせるように指示しているため、幅が 3000 ピクセルの場合、高さは同じになります。あなたには選択肢があります最終的な答えは、あなたの側の説明に依存します。この質問に対してコメントで質問させていただきました。しかし、私は一般的な答えをします。
以下の例で何が行われるかを簡単に説明します。
を含むを作成しました。必要に応じて、アスペクト比: 1;で拡大縮小します。.chessboard自体にはposition:absolute;があり、親のサイズを取得します。