CSS를 사용하여 자식 DIV의 너비를 부모 DIV보다 넓게 만드는 방법이 있습니까?

부모 컨테이너 DIV 내에 부모보다 넓은 자식 DIV를 가질 수있는 방법이 있습니까? 자식 DIV는 브라우저 뷰포트의 너비와 같아야합니다.

아래 예를 참조하십시오.

자식 DIV 는 부모 div의 자식으로 있어야합니다 . 자식 div에 임의의 음수 여백을 설정하여 더 넓게 만들 수 있지만 본질적으로 브라우저 너비를 100 % 너비로 만드는 방법을 해결할 수는 없습니다.

나는 이것을 할 수 있다는 것을 안다.

.child-div{
    margin-left: -100px;
    margin-right: -100px;
}

그러나 나는 아이가 역동적 인 브라우저와 너비가 같아야합니다.

최신 정보

귀하의 답변에 감사드립니다. 지금까지 가장 가까운 대답은 자식 DIV 위치를 절대 위치로 만들고 왼쪽 및 오른쪽 속성을 0으로 설정하는 것입니다.

다음 문제는 부모가 position : relative라는 것입니다. 왼쪽 및 오른쪽 속성이 여전히 브라우저가 아닌 부모 div에 상대적이라는 것을 의미합니다. 여기의 예제를 참조하십시오 : jsfiddle.net/v2Tja/2

다른 모든 것을 조이지 않고 부모에서 상대 위치를 제거 할 수 없습니다.

절대 위치 설정 사용

.child-div {
    position:absolute;
    left:0;
    right:0;
}

다음은 문서 플로우에서 하위 요소를 유지하는 일반적인 솔루션입니다.

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

width자식 요소의 전체를 뷰포트 너비 전체를 채우도록 설정 한 다음 left, 부모 요소 너비의 50 %를 뺀 뷰포트의 절반 거리만큼 화면 요소를 움직여서 화면 가장자리에 맞 춥니 다.

데모:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow-x: hidden;
}

.parent {
  max-width: 400px;
  margin: 0 auto;
  padding: 1rem;
  position: relative;
  background-color: darkgrey;
}

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

  height: 100px;
  border: 3px solid red;
  background-color: lightgrey;
}

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

vw 및 calc ()에 대한 브라우저 지원 은 일반적으로 IE9 이상으로 볼 수 있습니다.

참고 : 이것은 박스 모델이로 설정되어 있다고 가정합니다 border-box. 이 없으면 border-box패딩과 테두리를 빼서이 솔루션을 혼란스럽게 만들어야합니다.

참고 : 특정 브라우저에서는 오버플로가 없어도 가로 스크롤 막대를 표시하도록 선택할 수 있으므로 스크롤 컨테이너의 가로 오버플로를 숨기는 것이 좋습니다.

나는이 문제에 대한 해결책을 오랫동안 광범위하게 검색했습니다. 이상적으로 우리는 부모보다 자식을 더 크게 원하지만 부모의 제약을 미리 모르고 싶습니다.

그리고 마침내 여기 에서 훌륭한 일반 답변을 찾았 습니다 . 그대로 복사 :

여기서 아이디어는 다음과 같습니다. 컨테이너를 브라우저 창의 가운데로 정확히 왼쪽으로 : 50 %; 밀고 -50vw의 마진으로 왼쪽 가장자리로 다시 당깁니다.

.child-div {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

귀하의 제안 원래 제안 (음수 여백 설정)을 기반으로 동적 브라우저 너비에 백분율 단위를 사용하여 비슷한 방법을 시도했습니다.

HTML

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore neque repellat ipsum natus magni soluta explicabo architecto, molestias laboriosam rerum. Tempore eos labore temporibus alias necessitatibus illum enim, est harum perspiciatis, sit, totam earum corrupti placeat architecto aut minus dignissimos mollitia asperiores sint ea. Libero hic laudantium, ipsam nostrum earum distinctio. Cum expedita, ratione, accusamus dicta similique distinctio est dolore assumenda soluta dolorem quisquam ex possimus aliquid provident quo? Enim tempora quo cupiditate eveniet aperiam.</p>
        </div>
    </div>
</div>

CSS :

.child-div{
   margin: 0 -100%;
   padding: 0 -100%;
}

.parent {
    width: 60%;
    background-color: red;
    margin: 0 auto;
    padding: 50px;
    position:relative;
}

.grandparent {
        overflow-x:hidden;
        background-color: blue;
        width: 100%;
        position:relative;
    }

음수 여백은 컨텐츠를 상위 DIV 밖으로 흐르게합니다. 따라서 padding: 0 100%;콘텐츠를 Chlid DIV의 원래 경계로 다시 푸시하도록 설정했습니다 .

음수 여백은 또한 .child-div의 총 너비가 브라우저의 뷰포트 밖으로 확장되어 가로 스크롤이 발생합니다. 따라서 overflow-x: hidden조부모 DIV (부모 Div의 부모)에를 적용하여 돌출 너비를 잘라 내야합니다.

여기 JSfiddle이 있습니다

나는 Nils Kaspersson의 시도했다 left: calc(-50vw + 50%); Safari 브라우저가 제대로 작동하지 않을 때까지 Chrome & FF (IE에 대해서는 확실하지 않음)에서 완벽하게 작동했습니다. 실제로이 간단한 방법이 마음에들 때 곧이 문제가 해결되기를 바랍니다.

이것은 또한 부모 DIV 요소가 있어야하는 문제를 해결할 수 있습니다 position:relative

이 해결 방법의 두 가지 단점은 다음과 같습니다.

• 추가 마크 업이 필요합니다 (예 : 조부모 요소 (예 : 좋은 ol '테이블 세로 정렬 방법이 아닌 것처럼)).
• Child DIV의 왼쪽과 오른쪽 테두리는 단순히 브라우저의 뷰포트 외부에 있기 때문에 표시되지 않습니다.

이 방법으로 문제가 발견되면 알려주십시오.;). 도움이 되길 바랍니다.

Flexbox 를 사용하면 세 줄의 CSS로 부모보다 자식을 더 넓게 만들 수 있습니다.

오직 아이의 display, margin-left그리고 width필요가 설정된다. margin-left자녀에 따라 다릅니다 width. 공식은 다음과 같습니다.

margin-left: calc(-.5 * var(--child-width) + 50%);

CSS 변수를 사용하면 왼쪽 여백을 수동으로 계산하지 않아도됩니다.

데모 # 1 : 수동 계산

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
}

.wide {
  margin-left: calc(-37.5vw + 50%);
  width: 75vw;
}

.full {
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

데모 # 2 : CSS 변수 사용

.parent {
  background-color: aqua;
  height: 50vh;
  margin-left: auto;
  margin-right: auto;
  width: 50vw;
}

.child {
  background-color: pink;
  display: flex;
  margin-left: calc(-.5 * var(--child-width) + 50%);
  width: var(--child-width);
}

.wide {
  --child-width: 75vw;
}

.full {
  --child-width: 100vw;
}

<div class="parent">
  <div>
    parent
  </div>
  <div class="child wide">
    75vw
  </div>
  <div class="child full">
    100vw
  </div>
</div>

나는 이것을 사용했다 :

HTML

<div class="container">
 <div class="parent">
  <div class="child">
   <div class="inner-container"></div>
  </div>
 </div>
</div>

CSS

.container {
  overflow-x: hidden;
}

.child {
  position: relative;
  width: 200%;
  left: -50%;
}

.inner-container{
  max-width: 1179px;
  margin:0 auto;
}

당신은 위치를 시도 할 수 있습니다 : 절대. width 및 height, top : 'y from top from'and left : 'x-axis'를 지정하십시오.

나는 비슷한 문제가 있었다. 자식 요소의 내용은 부모 요소에 있어야했지만 배경은 전체 뷰포트 너비를 확장해야했습니다.

자식 요소를 만들고 position: relative의사 요소 ( :before)를 추가 하여이 문제를 해결 했습니다 position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. 의사 요소는 실제 자식 뒤에 의사 배경 요소로 남아 있습니다. 이것은 모든 브라우저에서 작동합니다 (IE8 + 및 Safari 6+조차도 이전 버전을 테스트 할 수 없음).

작은 예제 바이올린 : http://jsfiddle.net/vccv39j9/

Nils Kaspersson의 솔루션에 추가하여 세로 스크롤 막대의 너비도 해결합니다. 16px뷰포트 너비에서 빼는 예제로 사용 하고 있습니다. 이렇게하면 가로 스크롤 막대가 나타나지 않습니다.

width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));

부모가 너비가 고정되어 #page { width: 1000px; }있고 중앙에 있다고 가정하면 #page { margin: auto; }자식이 브라우저 뷰포트의 너비에 맞추기를 원할 수 있습니다.

#page {
    margin: auto;
    width: 1000px;
}

.fullwidth {
    margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
    width: 100vw;
}

자식 div를 내용만큼 넓게 만들려면 다음을 시도하십시오.

.child{
    position:absolute;
    left:0;
    overflow:visible;
    white-space:nowrap;
}

.parent {
    margin:0 auto;
    width:700px;
    border:2px solid red;
}
.child {
    position:absolute;
    width:100%;
    border:2px solid blue;
    left:0;
    top:200px;
}

나는 이것이 오래되었다는 것을 알고 있지만 대답을 위해 이것에 오는 사람이라면 그렇게 할 것입니다.

본문과 같은 부모 요소를 포함하는 요소에 숨겨진 오버플로입니다.

자식 요소의 너비를 페이지보다 훨씬 넓게 지정하고 절대 왼쪽에 -100 %를 두십시오.

예를 들면 다음과 같습니다.

body {
  overflow:hidden;
}

.parent{
  width: 960px;
  background-color: red;
  margin: 0 auto;
  position: relative;    
}

.child {
  height: 200px;
  position: absolute;
  left: -100%;
  width:9999999px;
}

JS Fiddle도 있습니다 : http://jsfiddle.net/v2Tja/288/

그런 다음 해결책은 다음과 같습니다.

HTML

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

CSS

.parent{
        width: 960px;
        margin: auto;
        height: 100vh
    }
    .child{
        position: absolute;
        width: 100vw
    }

귀하의 솔루션 중 일부를 시도했습니다. 이 하나 :

margin: 0px -100%;
padding: 0 100%;

더 작은 화면에는 추가 CSS가 필요하지 않기 때문에 지금까지 최고입니다. 결과를 보여주기 위해 codePen을 만들었습니다. 배경 이미지가있는 부모 div를 사용하고 내부 내용이있는 자식 divon div를 사용했습니다.

https://codepen.io/yuyazz/pen/BaoqBBq