내용에 따라 DIV의 높이를 확장하는 방법

이 질문은 내부 DIV를 수용하기 위해 DIV의 높이를 확장하는 것과 관련이 있습니다. 컨테이너 DIV의 구조를 유지합니다. 원하는 동작을 달성하려면 CSS 레이아웃을 수정하는 것이 필수적입니다.

한 가지 접근 방식은 "clear:both;"를 추가하는 것입니다. #main_content DIV를 닫기 전의 속성입니다. 이 CSS 규칙은 #main_content가 컨테이너 DIV에서 사용 가능한 전체 너비를 갖도록 브라우저에 이전 부동 요소를 무시하도록 지시합니다. 또한
요소를 #main_content DIV로 이동하고 CSS를 다음과 같이 설정할 수 있습니다.

.clear {
  clear: both;
}

Flexbox를 사용하는 대체 솔루션

보다 현대적인 대안은 유연하고 반응성이 뛰어난 레이아웃을 가능하게 하는 CSS3 레이아웃 모드인 Flexbox를 활용하는 것입니다. 이 접근 방식에서는 다음 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;
}

Flexbox를 사용하는 HTML 구조:

  

     Header   
    
  

    Content
  

위의 Flexbox 접근 방식은 콘텐츠 섹션이 내부 요소의 높이를 준수하면서 사용 가능한 수직 공간을 채우기 위해 자동으로 확장되는 반응형 레이아웃을 생성합니다.