CSS를 이용하여 자녀 DIV의 폭을 부모 DIV보다 넓히는 방법이 있습니까?
자식 DIV를 부모 컨테이너 DIV보다 넓은 부모 컨테이너 DIV 내에 둘 수 있는 방법이 있습니까?하위 DIV는 브라우저 뷰포트의 너비와 같아야 합니다.
예시 : 의 를 :
자식 DIV는 부모 DIV의 자식으로 남아 있어야 합니다.나는 아이 디브에 임의의 음의 마진을 설정하여 더 넓게 만들 수 있다는 것을 알고 있지만 본질적으로 브라우저의 100% 너비로 만드는 방법을 알 수 없습니다.
제가 할 수 있는 일은 알고 있습니다.
.child-div{
margin-left: -100px;
margin-right: -100px;
}
하지만 아이의 폭이 브라우저의 폭과 같아야 합니다.
갱신하다
답변 감사합니다, 지금까지 가장 가까운 답은 아이를 DIV로 만드는 것 같습니다.position: absolute 을 으로 합니다 합니다 으로 을
position: relative, 즉, 왼쪽 및 오른쪽 속성이 브라우저가 아닌 상위 div에 여전히 상대적임을 의미합니다. 여기 jsfiddle.net/v2Tja/2 예를 참조하십시오.
제거할 수 없습니다.position: relative다른 모든 것을 망치지 않고 부모로부터 받은 것입니다.
문서의 하위 요소를 계속해서 유지하는 일반적인 솔루션은 다음과 같습니다.
.child {
width: 100vw;
position: relative;
left: calc(-50vw + 50%);
}
저희가 설정을.width너비를 체트록위를한다음게의에e다tf게egft에oyeteen체d,tetehnle의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 이 과 를 을 으로 입니다 입니다 으로 을 과
참고: 오버플로가 없음에도 불구하고 특정 브라우저에서 가로 스크롤 막대를 표시할 수 있으므로 스크롤 컨테이너의 가로 오버플로를 숨기는 것이 좋습니다.
절대위치 사용
.child-div {
position:absolute;
left:0;
right:0;
}
저는 오랫동안 이 문제에 대한 해결책을 찾아 왔습니다.이상적으로 우리는 부모보다 더 큰 아이를 갖길 원하지만, 부모의 제약을 미리 알지는 못합니다.
그리고 마침내 여기서 훌륭한 총론적인 답을 찾았습니다.말 그대로 복사하기:
여기서의 아이디어는 컨테이너를 왼쪽 브라우저 창의 정확한 가운데로 밀어넣는 것입니다: 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%;콘텐츠를 Child DIV의 원래 경계로 되돌리는 것입니다.
또한 마이너스 여백으로 인해 .child-div의 전체 너비가 브라우저의 뷰포트 밖으로 확장되어 수평 스크롤이 발생합니다.는 Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ Δ, overflow-x: hidden조부모 DIV(부모 DIV의 부모)에게:
여기 Js fiddle 입니다.
닐스 캐스퍼슨의 것을 시도해 봤습니다.left: calc(-50vw + 50%); 사파리 브라우저가 제대로 작동하지 않는다는 것을 알게 될 때까지 Chrome & FF에서 완벽하게 작동했습니다(IE는 아직 확실하지 않습니다).이 간단한 방법이 마음에 드니 빨리 고쳐주셨으면 좋겠습니다.
DIV 가 를 가 될 가 될 를 가 가 position:relative
이 해결 방법의 두 가지 단점은 다음과 같습니다.
- 추가 마크업(즉, 조부모 요소)이 필요합니다(좋은 ol'table 수직 정렬 방법이 아닌 것처럼...).
- 하위 DIV의 왼쪽 및 오른쪽 테두리는 브라우저의 뷰포트 밖에 있다는 이유만으로 표시되지 않습니다.
이 방법에 문제가 있다면 알려주세요 ;).도움이 되길 바랍니다.
플렉스박스는 세 줄의 CSS로 아이를 부모보다 더 넓게 만들기 위해 사용될 수 있습니다.
의.display,margin-left그리고.width설정할 필요가 있습니다.margin-left의라다에다en라s에 따라 달라집니다.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;
}
당신의 해결책을 몇 가지 시도해 봤습니다.이거:
margin: 0px -100%;
padding: 0 100%;
더 작은 화면을 위해 별도의 CSS가 필요 없기 때문에 단연 최고입니다.결과를 보여주기 위해 코드펜을 만들었습니다. 배경 이미지가 있는 부모 디브와 내부 내용이 있는 자녀 디브를 사용했습니다.
https://codepen.io/yuyazz/pen/BaoqBBq
저도 비슷한 문제가 있었습니다.하위 요소의 내용은 상위 요소에 머물러야 하는 반면 배경은 전체 보기 포트 너비를 확장해야 합니다.
하위 요소를 만들어 이 문제를 해결했습니다.position: relative의사 요소 추가(:before)을 사용하여position: absolute; top: 0; bottom: 0; width: 4000px; left: -1000px;. 유사 요소는 실제 자식 뒤에 유사 배경 요소로 남아 있습니다.이 기능은 모든 브라우저에서 작동합니다(IE8+ 및 Safari 6+조차도 이전 버전을 테스트할 가능성이 없습니다).
작은 예제 fiddle: http://jsfiddle.net/vccv39j9/
어린이 디브를 콘텐츠만큼 넓게 만들려면 다음을 시도합니다.
.child{
position:absolute;
left:0;
overflow:visible;
white-space:nowrap;
}
포지션: 절대를 시도할 수 있습니다.그리고 폭과 높이, 상단: '위에서 y축', 왼쪽: 'x축'을 제공합니다.
이것이 오래된 일이라는 것을 알고 있지만, 답을 얻기 위해 이 문제를 제기하는 사람은 누구나 그렇게 할 것입니다.
본문과 같이 상위 요소를 포함하는 요소에 숨겨진 오버플로입니다.
어린이 요소의 너비를 페이지보다 훨씬 넓게 지정하고 -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/
닐스 캐스퍼슨의 해결책에 더해 세로 스크롤 바의 폭도 해결하고 있습니다.사용중입니다16px예를 들어, 뷰 포트 너비에서 차감됩니다.이렇게 하면 가로 스크롤 막대가 나타나지 않습니다.
width: calc(100vw - 16px);
left: calc(-1 * (((100vw - 16px) - 100%) / 2));
를 들어 이 되어 합니다 의 합니다 되어 이 예를 들어#page { width: 1000px; } 중심에다다d에ds다 #page { margin: auto; }의 너비를 할 수 다음과 같이 해야
#page {
margin: auto;
width: 1000px;
}
.fullwidth {
margin-left: calc(500px - 50vw); /* 500px is half of the parent's 1000px */
width: 100vw;
}
.parent {
margin:0 auto;
width:700px;
border:2px solid red;
}
.child {
position:absolute;
width:100%;
border:2px solid blue;
left:0;
top:200px;
}
그렇다면 해결책은 다음과 같습니다.
HTML
<div class="parent">
<div class="child"></div>
</div>
CSS
.parent{
width: 960px;
margin: auto;
height: 100vh
}
.child{
position: absolute;
width: 100vw
}
언급URL : https://stackoverflow.com/questions/5581034/is-there-a-way-to-make-a-child-divs-width-wider-than-the-parent-div-using-css
'sourcetip' 카테고리의 다른 글
| 몇 번 실행 후 쿼리가 매우 느립니다. (0) | 2023.09.15 |
|---|---|
| mysqdump에 없는 경우 테이블 만들기 (0) | 2023.09.15 |
| 오류: "정의되지 않은 공급자가 있습니다!일반적으로 이것은 당신이 순환적인 의존 관계를 가지고 있다는 것을 의미합니다." (0) | 2023.09.15 |
| 선택 후 동작 트리거 선택2 (0) | 2023.09.15 |
| 테이블 열을 행으로 피벗하고 값이 다른 테이블에 없는 경우 한 테이블의 값 사용 (0) | 2023.09.10 |