1 つのコンテナ div 内のスペースを、切り替え可能な可視性と異なるコンテンツを持つ 2 つの div に均等に分配するにはどうすればよいですか?
<p>4 つの div を含む div コンテナがあります。 2 つのヘッダーと 2 つのコンテンツ div があります。ヘッダーをクリックすると、その下のコンテンツ div の表示が切り替わります。 </p>
<p>次の 3 つの状況を考えてみたいと思います。</p>
<ol>
<li>両方のコンテンツ div が開いており (表示されており)、スクロールバーがあります。この場合、両方が利用可能なスペースの半分を占めるようにします。 </li>
<li>1 つのコンテンツ div がスクロールバーの有無にかかわらず開かれています。この場合、利用可能なすべてのスペースまたは必要なスペースを占有したいと考えています。 </li>
<li>両方のコンテンツ div が閉じられています。この場合、タイトル div をコンテナーの最上部に置きたいと思います。 </li>
</ol>
<h3>実装された機能</h3>
-
<li>両方の div にスクロールバーがあり、開いている場合、利用可能なスペースは均等に分配されます。 </li>
<li>一方が閉じられている場合、もう一方は利用可能なスペースを埋めます。両方ともオフの場合は、タイトルのみが表示されます。 </li>
</ul>
<h3>未実装の機能</h3>
-
<li>下部コンテンツ div が閉じられ、上部コンテンツ div にスクロールバーがある場合、上部コンテンツ div の高さはコンテナの高さの半分までしか増加しません。 </li>
<li>両方のコンテンツ div がスクロールバーなしで開いている場合、コンテンツ div はコンテナの高さの 50% まで拡大され、コンテンツ div とその下のタイトル div の間に空白のスペースが作成されます。 </li>
</ul>
<p>これは HTML の構造です</p>
<pre class="brush:php;toolbar:false;"><div class='flex-container'>
<div id='header1' class='header'>
ヘッダー 1
</div>
<div id='content1' class='header-content'>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
<div class='item'>ロレム</div>
</div>
<div id='header2' class='header'>
ヘッダー 2
</div>
<div id='content2' class='header-content'>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
<div class='item'>イプサム</div>
</div>
</div></pre>
<p>これが私が適用しようとしたスタイルです。 Sass を使用していることに注意してください。 </p>
<pre class="brush:php;toolbar:false;">.flex-container {
ディスプレイ: フレックス;
フレックス方向: 列;
高さ: 300ピクセル;
幅: 150ピクセル;
オーバーフロー-y: 自動;
}
.header {
ディスプレイ: フレックス;
整列項目: 中央;
最小高さ: 35px;
背景色: #99e9f2;
カーソル: ポインタ;
}
.header-content {
フレックスベース: calc(50% - 35px);
フレックスグロー: 1;
オーバーフロー-y: 自動;
ディスプレイ: フレックス;
フレックス方向: 列;
。アイテム {
パディング: 3px 12px;
背景色: #e3fafc;
}
}</pre>
<p>これはコードペンへのリンクです。 </p>
<h3>試したこと</h3>
-
<li> また、<code>max-heigth: calc(50% - 35px)</code> (タイトルの高さは 35px) を使用してみました。これにより、コンテンツ div が大きくなり空白のギャップが表示される問題が解決されました。ただし、これにより、別のコンテンツ div が閉じられた場合でも、コンテンツ div がその高さを超えて拡大することはなくなります。 </li>
<li><code>flex-basis: calc(50% - 35px)</code> および <code>max-height の代わりに、<code>flex-grow: 1</code> のみを使用します。 calc(50% - 35px)</code> は、コンテンツ div をコンテナの高さの約 50% 以上大きくすることができますが、コンテンツ div に多くの要素がある場合、コンテンツ div の高さが不均一になります。その結果、利用可能なスペースが不均一になります。均等に配分してください。 </li>
</ul>
