자식을 수용하기 위해 중첩된 DIV 컨테이너를 확장하는 방법은 무엇입니까?

페이지 콘텐츠 수용을 위한 중첩 DIV의 높이 확장

중첩 DIV 구조로 작업할 때 다음을 보장해야 하는 문제에 직면하는 것이 일반적입니다. 기본 컨테이너는 하위 DIV를 수용할 수 있도록 동적으로 크기가 조정됩니다. 이 특정 시나리오의 목표는 #main_content DIV가 그 안에 항목을 수용할 수 있도록 필요에 따라 높이를 확장하는 것입니다.

이 문제를 해결하기 위한 효과적인 해결책 중 하나는 #main_content를 닫기 전에 강제로 Clearfix를 실행하는 것입니다. DIV. 이렇게 하려면
이 DIV에 태그를 추가하세요.

<code class="css">.clear {
  clear: both;
}</code>

Flexbox를 사용한 최신 접근 방식

보다 현대적인 솔루션을 원한다면 CSS3의 최신 레이아웃 방법인 Flexbox를 사용하는 것이 좋습니다. 이 기술을 사용하면 요소가 사용자 정의 가능한 크기 및 자동 크기 조정을 통해 열이나 행에 배열되는 유연한 상자 레이아웃이 가능합니다.

Flexbox를 구현하려면 상위 컨테이너를 Flex 컨테이너로 정의하고 Flex 방향을 열 형식으로 설정하세요. 이렇게 하면 하위 요소가 수직으로 쌓이게 됩니다. 그런 다음 기본 콘텐츠 섹션에 flex 속성을 할당하여 사용 가능한 공간을 차지하도록 확장해야 함을 나타냅니다.

<code class="css">body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}</code>

<code class="html"><div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div></code>

이러한 기술을 통합하면 #main_content가 원하는 동작을 효과적으로 달성할 수 있습니다. DIV 또는 그에 상응하는 최신 Flexbox는 모든 하위 DIV를 포함하도록 동적으로 크기를 조정하여 시각적으로 매력적이고 반응성이 뛰어난 디자인을 제공합니다.

위 내용은 자식을 수용하기 위해 중첩된 DIV 컨테이너를 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!