반응형 컨테이너를 유지하면서 전체 너비 배경을 만들려면 어떻게 해야 합니까?

전체 너비 배경의 DIV 오버플로

반응형 디자인에서는 요소가 화면의 전체 너비를 차지하는 것이 바람직한 경우가 많습니다. 그러나 컨테이너에는 사전 정의된 최대 너비가 있는 경우가 많습니다. 한 가지 해결 방법은 컨테이너 경계를 넘어 확장되는 추가 전체 너비 div로 컨테이너를 래핑하는 것입니다.

다음 CSS를 고려하세요.

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

이 컨테이너의 최대 너비는 1280px이고 화면 중앙에 자동으로 조정되는 여백. 전체 너비 오버플로를 달성하려면 최대 너비가 없는 컨테이너 외부에 새 div를 만들고 여기에 배경색이나 이미지를 적용하세요.

.fullwidth {
    background: orange;
    padding-bottom: 100px;
}

이 전체 너비 div 내에 컨테이너를 래핑하세요.

<div class="fullwidth">
    <div class="container">
        ...content...
    </div>
</div>

이렇게 하면 전체 너비 div에 적용된 배경색이나 이미지가 화면의 전체 너비로 확장되고 컨테이너는 미리 정의된 경계 내에 유지됩니다. 이 접근 방식은 컨테이너 내에서 반응형 그리드 시스템을 유지하면서 배너 또는 기타 전체 너비 섹션을 만드는 데 유용할 수 있습니다.

위 내용은 반응형 컨테이너를 유지하면서 전체 너비 배경을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!