콘텐츠 오버플로를 CSS의 제한 Div로 만드는 방법은 무엇입니까?

제한 Div의 콘텐츠 오버플로

CSS에서 div 요소는 일반적으로 특정 너비와 여백을 정의하는 컨테이너 역할을 합니다. 그러나 콘텐츠가 div의 경계를 넘어 화면의 전체 너비까지 확장되도록 허용하려는 경우가 있습니다. 이를 달성하는 방법은 다음과 같습니다.

컨테이너 우회

가장 간단한 해결책은 컨테이너의 제한을 제거하는 것입니다. div 내의 모든 콘텐츠를 유지하는 대신 전체 너비 요소에 대한 새 div를 만듭니다. 이를 통해 배경 이미지나 색상이 원래 컨테이너의 한계를 넘어 확장될 수 있습니다.

다음 예에서는 "컨테이너" 외부에 "전폭" div를 만듭니다.

* {
  box-sizing: border-box;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}

HTML:

<div class="container">
  <header></header>
</div>
<div class="fullwidth">
  <div class="container">
    <div class="mydiv">...</div>
  </div>
</div>
<div class="container">
  <footer></footer>
</div>

전체 너비 div에서 컨테이너를 제거하면 배경이 전체 너비 div에 걸쳐 확장될 수 있습니다. screen.

컨테이너 너비 초과

또 다른 접근 방식은 calc() 함수를 사용하여 요소의 너비를 동적으로 조정하는 것입니다. 이는 상위 컨테이너 또는 전체 너비 요소 자체에 적용될 수 있습니다.

예를 들어 "컨테이너" div를 수정하여 최대 너비 이상으로 확장할 수 있습니다.

.container {
  width: calc(100% + 60px);
  max-width: 1280px;
}

이 경우 이제 컨테이너의 너비가 최대 너비를 초과하므로 넘쳐나는 콘텐츠가 원래 경계를 넘어 확장될 수 있습니다.

위 내용은 콘텐츠 오버플로를 CSS의 제한 Div로 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!