CSS에서 컨테이너 너비를 넘어 콘텐츠가 오버플로되도록 하려면 어떻게 해야 합니까?

CSS에서 컨테이너 너비를 넘어 콘텐츠 확장

반응형 그리드로 작업할 때 특정 너비로 ​​확장되는 포함 div가 필요한 경우가 많습니다. 그러나 특정 상황에서는 컨테이너 너비를 넘어 콘텐츠를 오버플로해야 할 수도 있습니다.

다음 CSS 예를 고려하세요.

.container {
  margin-left: auto;
  margin-right: auto;
  max-width: 1280px;
  padding: 0 30px;
  width: 100%;
}

이 컨테이너는 최대 너비 1280px로 확장되고 추가됩니다. 왼쪽과 오른쪽에 패딩을 추가합니다. 기본적으로 이 컨테이너 내의 콘텐츠는 정의된 너비 내에서 줄바꿈됩니다.

콘텐츠가 컨테이너 너비를 넘어 오버플로되도록 허용하려면 다음 두 가지 옵션이 있습니다.

1. 추가 Div 사용

가장 간단한 해결책은 초기 컨테이너를 닫고 화면 전체 너비로 확장되는 새 div를 여는 것입니다. 그런 다음 이 전체 너비 div에 원하는 배경 색상이나 이미지를 적용할 수 있습니다.

2. 컨테이너 제거

경우에 따라 포함 div가 전혀 필요하지 않을 수도 있습니다. 간단히 컨테이너를 제거하고 전체 너비 div가 사용 가능한 공간을 채우도록 허용합니다. 이 접근 방식은 너비 이외의 추가 콘텐츠 없이 전체 너비 배경만 구현해야 하는 경우에 적합합니다.

예제 코드:

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

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.container {
  max-width: 80%;
  border: 1px solid red;
  margin: 0 auto;
}
.fullwidth {
  background: orange;
}
header {
  height: 50px;
  background: #663399;
}
.mydiv {
  min-height: 50px;
}
footer {
  height: 50px;
  background: #bada55;
}

이러한 접근 방식을 이해하면 필요할 때 컨테이너 너비를 넘어 넘쳐나는 콘텐츠를 수용하는 반응형 디자인을 만들 수 있습니다.

위 내용은 CSS에서 컨테이너 너비를 넘어 콘텐츠가 오버플로되도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!