전환 가능한 가시성과 다른 콘텐츠를 사용하여 하나의 컨테이너 div의 공간을 두 개의 div에 균등하게 분배하는 방법은 무엇입니까?

Question

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

Answer 1

이렇게 하면 원하는 것을 이룰 수 있습니다. 필요에 따라 수정할 수 있습니다:

으아악