절대 위치 div 부모 div 높이 확장
에서 볼 수, 나는 아에 CSS서볼수있이, ▁want다▁as▁i니를 원합니다.child2앞으로 나아가다child1입니다.child2모바일 기기의 콘텐츠 아래에 원하는 탐색 기능이 포함되어 있기 때문에 맨 아래에 있어야 합니다. - 두 개의 마스터 페이지가 어떨까요?이것이 유일한 2개입니다.divs전체 HTML에서 재배치되므로 이 사소한 변경에 대한 2개의 마스터 페이지는 오버킬입니다.
HTML:
<div id="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
child2에서는 하위 사이트마다 탐색 항목이 많거나 적을 수 있으므로 동적 높이가 있습니다.
절대적으로 위치한 요소들이 흐름에서 제거되어 다른 요소들에 의해 무시됩니다.
설정해봤습니다.overflow:hidden; 그러나 도움이 되지 , 부모디브서그도, 한이되않고았지움또, 이 되지 .clearfix.
로 두 입니다.divs따라서, 하지만 지금은 자바스크립트가 아닌 방법이 있는지 알아보겠습니다.
질문에 직접 답변하셨습니다.
절대적으로 위치한 요소들이 흐름에서 제거되어 다른 요소들에 의해 무시됩니다.
따라서 절대 위치 요소에 따라 부모 높이를 설정할 수 없습니다.
고정 높이를 사용하거나 JavaScript를 사용해야 합니다.
요즘에는 CSS 플렉스박스나 그리드 레이아웃을 사용하여 부모 컨테이너 안에 있는 HTML 요소의 시각적 순서를 반대로 사용할 수 있습니다.position: absolute;참고 항목: CSS 그리드 레이아웃의 열 역순
비록 그것을 가지고 요소들로 뻗어나가지만.position: absolute불가능합니다. 동일한 효과를 얻으면서 절대 위치 지정을 피할 수 있는 솔루션이 종종 있습니다.당신의 특정 사례에서 문제를 해결하는 이 바이올린을 보세요. http://jsfiddle.net/gS9q7/
첫 번째 요소를 오른쪽으로, 두 번째 요소를 왼쪽으로 플로팅하여 두 번째 요소가 먼저 나타나도록 하여 요소 순서를 반대로 표시하는 것이 요령입니다.
.child1 {
width: calc(100% - 160px);
float: right;
}
.child2 {
width: 145px;
float: left;
}
마지막으로 상위 항목에 명확한 수정 사항을 추가하면 완료됩니다(전체 솔루션은 피들 참조).
일반적으로 절대 위치를 가진 요소가 상위 요소의 맨 위에 위치하는 한 요소를 부동시켜 해결 방법을 찾을 가능성이 높습니다.
이것을 해결하는 아주 간단한 방법이 있습니다.
부모 div에서 display:none을 사용하여 상대 div에서 child1과 child2의 내용을 복제하면 됩니다.child1_1과 child2_2를 말합니다.child2_2를 위에, child1_1을 아래에 놓습니다.
jquery(또는 기타)에서 절대 div를 호출할 때는 display:block AND visibility:hidden으로 해당 상대 div(child1_1 또는 child2_2)를 설정하기만 하면 됩니다.상대적인 자식은 여전히 보이지 않지만 부모의 div를 더 높게 만듭니다.
필라 말이 맞아요 하지만 당신은 부모님을 얻을 수 있어요.div하위 요소로 수축하거나 확장하는 경우div다음과 같은 위치 설정:
.parent {
position: absolute;
/* position it in the browser using the `left`, `top` and `margin`
attributes */
}
.child {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
/* to pad or move it around using `left` and `top` inside the parent */
}
이것은 당신에게 효과가 있을 것입니다.
이 질문은 flexbox 이전인 2012년에 제기되었습니다.최신 CSS를 사용하여 이 문제를 해결하는 올바른 방법은 모바일 장치에 대한 미디어 쿼리 및 플렉스 열 반전입니다.절대적인 위치 지정은 필요하지 않습니다.
https://jsfiddle.net/tnhsaesop/vjftq198/3/
HTML:
<div class="parent">
<div style="background-color:lightgrey;">
<p>
I stay on top on desktop and I'm on bottom on mobile
</p>
</div>
<div style="background-color:grey;">
<p>
I stay on bottom on desktop and I'm on top on mobile
</p>
</div>
</div>
CSS:
.parent {
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
.parent {
flex-direction: column-reverse;
}
}
순수한 자바스크립트를 사용하면, 당신은 단지 당신의 높이를 검색하기만 하면 됩니다.static position어린이 요소.child1getComputedStyle() 메서드를 사용하여 검색 값을 다음으로 설정합니다.padding-topHTMLlement.style 속성을 사용하는 동일한 자식에 대해.
위에서 설명한 내용의 실제 예를 보려면 다음 코드 조각을 확인하고 실행하십시오.
/* JavaScript */
var child1 = document.querySelector(".child1");
var parent = document.getElementById("parent");
var childHeight = parseInt(window.getComputedStyle(child1).height) + "px";
child1.style.paddingTop = childHeight;/* CSS */
#parent { position: relative; width: 100%; }
.child1 { width: auto; }
.child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }
html, body { width: 100%;height: 100%; margin: 0; padding: 0; }<!-- HTML -->
<div id="parent">
<div class="child1">STATIC</div>
<div class="child2">ABSOLUTE</div>
</div>이 문제를 해결하는 아주 간단한 해킹이 있습니다.
다음은 솔루션을 설명하는 코드와 상자입니다. https://codesandbox.io/s/00w06z1n5l
HTML
<div id="parent">
<div class="hack">
<div class="child">
</div>
</div>
</div>
CSS
.parent { position: relative; width: 100%; }
.hack { position: absolute; left:0; right:0; top:0;}
.child { position: absolute; left: 0; right: 0; bottom:0; }
당신은 아이가 어디에 위치하는지에 영향을 미치도록 해킹 디브의 위치를 가지고 놀 수 있습니다.
다음은 스니펫입니다.
html {
font-family: sans-serif;
text-align: center;
}
.container {
border: 2px solid gray;
height: 400px;
display: flex;
flex-direction: column;
}
.stuff-the-middle {
background: papayawhip
url("https://camo.githubusercontent.com/6609e7239d46222bbcbd846155351a8ce06eb11f/687474703a2f2f692e696d6775722e636f6d2f4e577a764a6d6d2e706e67");
flex: 1;
}
.parent {
background: palevioletred;
position: relative;
}
.hack {
position: absolute;
left: 0;
top:0;
right: 0;
}
.child {
height: 40px;
background: rgba(0, 0, 0, 0.5);
position: absolute;
bottom: 0;
left: 0;
right: 0;
} <div class="container">
<div class="stuff-the-middle">
I have stuff annoyingly in th emiddle
</div>
<div class="parent">
<div class="hack">
<div class="child">
I'm inside of my parent but absolutely on top
</div>
</div>
I'm the parent
<br /> You can modify my height
<br /> and my child is always on top
<br /> absolutely on top
<br /> try removing this text
</div>
</div>저는 다른 해결책을 생각해 냈습니다. 제가 사랑하지는 않지만 일을 완수하는 것입니다.
기본적으로 중복이 보이지 않도록 하위 요소를 복제합니다.
<div id="parent">
<div class="width-calc">
<div class="child1"></div>
<div class="child2"></div>
</div>
<div class="child1"></div>
<div class="child2"></div>
</div>
CSS:
.width-calc {
height: 0;
overflow: hidden;
}
이러한 하위 요소에 마크업이 거의 포함되지 않으면 영향이 작습니다.
저도 비슷한 문제가 있었습니다.이를 해결하기 위해 (본문, 문서 또는 창을 사용하여 iframe의 높이를 계산하는 대신) 전체 페이지 내용을 감싸는 div(예: ID="page"를 만든 다음 높이를 사용했습니다.
"고정 높이를 사용하거나 JS를 참여시켜야 합니다."
다음은 JS의 예입니다.
jQuery JS 예제----------------------------------------------------------------
function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();
$(containerSelector).children().each(function (i){
if (maxX < parseInt($(this).css('left')) + $(this).width()){
maxX = parseInt($(this).css('left')) + $(this).width();
}
if (maxY < parseInt($(this).css('top')) + $(this).height()){
maxY = parseInt($(this).css('top')) + $(this).height();
}
});
return {
'width': maxX,
'height': maxY
}
}
var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
$("#SpecBody").width(specBodySize.width);
$("#SpecBody").height(specBodySize.height);
다음 접근 방식도 고려합니다.
CSS:
.parent {
height: 100%;
}
.parent:after {
content: '';
display: block;
}
또한 당신이 div의 위치를 바꾸려고 하기 때문에 css 그리드를 고려합니다.
이제 더 나은 방법이 있습니다.맨 아래 속성을 사용할 수 있습니다.
.my-element {
position: absolute;
bottom: 30px;
}
이것은 @ChrisC가 제안한 것과 매우 유사합니다.절대 위치 요소가 아니라 상대 요소를 사용합니다.당신을 위해 일할 수도 있습니다.
<div class="container">
<div class="my-child"></div>
</div>
그리고 당신의 css는 다음과 같습니다.
.container{
background-color: red;
position: relative;
border: 1px solid black;
width: 100%;
}
.my-child{
position: relative;
top: 0;
left: 100%;
height: 100px;
width: 100px;
margin-left: -100px;
background-color: blue;
}
https://jsfiddle.net/royriojas/dndjwa6t/
인 관점은 위치에 조상과 되는 위치를 합니다.position: static), 부모에 인 관점을 positionrelative그리고 아이는positionabsolute
이것 좀 먹어봐요, 나를 위해 작동했어요.
.child {
width: 100%;
position: absolute;
top: 0px;
bottom: 0px;
z-index: 1;
}
자식 키를 부모 키로 설정합니다.
언급URL : https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height
'programing' 카테고리의 다른 글
| 명령줄에서 특정 PowerShell 함수 호출 (0) | 2023.09.03 |
|---|---|
| 여러 PHP 변수 동시 초기화 (0) | 2023.09.03 |
| 대신 AJAX 요청을 보내도록 스트라이프 체크아웃을 수정하려면 어떻게 해야 합니까? (0) | 2023.09.03 |
| Git 분리된 HEAD가 있는 분기 생성 (0) | 2023.09.03 |
| 빠른 운동장을 사용하여 콘솔에 인쇄하는 방법은 무엇입니까? (0) | 2023.09.03 |