전환 가능한 가시성과 다른 콘텐츠를 사용하여 하나의 컨테이너 div의 공간을 두 개의 div에 균등하게 분배하는 방법은 무엇입니까?
<p>4개의 div가 포함된 div 컨테이너가 있습니다. 헤더 2개와 콘텐츠 div 2개가 있습니다. 헤더를 클릭하면 그 아래에 있는 콘텐츠 div의 가시성이 전환됩니다. </p>
<p>다음 세 가지 상황을 고려하고 싶습니다.</p>
<올>
<li>두 콘텐츠 div 모두 열려 있고(표시됨) 스크롤 막대가 있습니다. 이 경우에는 둘 다 사용 가능한 공간의 절반을 차지하기를 원합니다. </li>
1개의 콘텐츠 div가 스크롤바 유무에 관계없이 열려 있습니다. 이 경우 사용 가능한 모든 공간이나 필요한 공간을 차지하기를 원합니다. </li>
두 콘텐츠 div가 모두 닫혀 있습니다. 이 경우 제목 div를 컨테이너 위에 두기를 원합니다. </li>
</ol>
구현된 기능
<li>두 div 모두 스크롤 막대가 있고 열려 있으면 사용 가능한 공간이 균등하게 분배됩니다. </li>
- 하나가 닫혀 있으면 다른 하나가 사용 가능한 공간을 채웁니다. 둘 다 꺼져 있으면 제목만 표시됩니다. </li>
</ul>
<h3>구현되지 않은 기능</h3>
<li>하단 콘텐츠 div가 닫혀 있고 상단 콘텐츠 div에 스크롤 막대가 있는 경우 상단 콘텐츠 div의 높이는 컨테이너 높이의 절반까지만 늘어납니다. </li>
<li>두 콘텐츠 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'>Ipsum</div>
<div class='item'>Ipsum</div>
<div class='item'>Ipsum</div>
<div class='item'>Ipsum</div>
<div class='item'>Ipsum</div>
<div class='item'>입섬</div>
<div class='item'>Ipsum</div>
<div class='item'>Ipsum</div>
</div>
<p>제가 적용해 본 스타일입니다. 저는 Sass를 사용하고 있습니다. </p>
<pre class="brush:php;toolbar:false;">.flex-container {
디스플레이: 플렉스;
플렉스 방향: 열;
높이: 300px;
너비: 150px;
오버플로-y: 자동;
}
.머리글 {
디스플레이: 플렉스;
항목 정렬: 중앙;
최소 높이: 35px;
배경색: #99e9f2;
커서: 포인터;
}
.헤더 내용 {
플렉스 기준: calc(50% - 35px);
플렉스 성장: 1;
오버플로-y: 자동;
디스플레이: 플렉스;
플렉스 방향: 열;
.안건 {
패딩: 3px 12px;
배경색: #e3fafc;
}
}</pre>
<p>코드펜 링크입니다. </p>
<h3>내가 시도한 것들</h3>
<li> 또한 <code>max-heigth: calc(50% - 35px)</code>(제목 높이가 35px)를 사용하여 공백 공백이 나타나는 문제를 해결했지만 이는 또한 다른 콘텐츠 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><p><br /></p>
P粉289775043407일 전552