CSS를 사용하여 하위 DIV를 상위 DIV보다 넓게 만들 수 있습니까?

CSS를 사용하여 상위 경계를 넘어 하위 DIV 너비 확장

CSS를 사용하면 상위 컨테이너 외부로 하위 DIV 너비를 확장할 수 있습니다. 이를 통해 하위 DIV가 전체 브라우저 뷰포트에 걸쳐 확장될 수 있습니다.

일반 솔루션

이를 달성하려면 하위 요소에 다음 CSS 속성을 사용하세요.

.child {
  width: 100vw;
  position: relative;
  left: calc(-50vw + 50%);
}

• 너비: 100vw; 전체 브라우저 창에 걸쳐 자식의 너비를 뷰포트의 100%로 설정합니다.
• 위치: 상대; 자식의 위치가 부모를 기준으로 하여 조정이 가능하도록 합니다.
• left: calc(-50vw 50%); 자식의 왼쪽 가장자리를 뷰포트의 50%에서 부모 너비의 50%를 뺀 값으로 오프셋하여 브라우저의 왼쪽 경계에 정렬합니다.

예

<div class="parent">
  <div class="child">Child</div>
</div>

.parent {
  width: 400px;
  margin: 0 auto;
  background-color: #ccc;
}

.child {
  height: 100px;
  border: 1px solid #000;
  background-color: #fff;
}

이 예는 400px 너비의 상위 DIV와 하위 DIV를 생성합니다. 전체 뷰포트 너비를 확장합니다.

위 내용은 CSS를 사용하여 하위 DIV를 상위 DIV보다 넓게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!