절대 위치 div를 확장하여 부모 div 높이 확장

절대 위치 div를 확장하여 부모 div 높이 확장

---

아래 CSS에서 볼 수 있듯이 child2전에 위치를 지정 하고 싶습니다 child1. 현재 개발중인 사이트는 모바일 장치에서도 작동해야하기 때문에 모바일 장치 child2의 콘텐츠 아래에 원하는 탐색 기능이 포함되어 있기 때문에 맨 아래에 있어야합니다. -왜 2 개의 마스터 페이지가 아닌가? 이것은 divs전체 HTML에서 재배치되는 유일한 2 이므로이 작은 변경에 대한 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 하위 사이트마다 탐색 항목이 많거나 적을 수 있으므로 동적 높이가 다릅니다.

절대 위치 요소가 흐름에서 제거되어 다른 요소에 의해 무시된다는 것을 알고 있습니다. 부모 div에서
설정 overflow:hidden;을 시도했지만 도움이되지 않았습니다 clearfix.

마지막 수단은 두 가지를 divs적절 하게 재배치하는 JavaScript입니다 .하지만 지금은 JavaScript 이외의 방법으로이 작업을 수행하려고합니다.

---

당신은 스스로 질문에 답했습니다 : "절대 위치 요소가 흐름에서 제거되어 다른 요소에 의해 무시된다는 것을 알고 있습니다." 따라서 절대 위치 요소에 따라 부모 높이를 설정할 수 없습니다.

고정 높이를 사용하거나 JS를 포함해야합니다.

---

요소로 연신 할 position: absolute수는 없지만 동일한 효과를 얻는 동안 절대 위치를 피할 수있는 솔루션이 종종 있습니다. 특정 상황에서 문제를 해결하는이 바이올린을보십시오. http://jsfiddle.net/gS9q7/

트릭은 첫 번째 요소는 오른쪽으로, 두 번째 요소는 왼쪽으로 두 요소를 모두 플로팅하여 요소 순서를 반대로 바꾸어 두 번째 요소가 먼저 나타납니다.

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

마지막으로 부모에게 명확한 수정을 추가하면 완료됩니다 ( 완벽한 해결책 은 바이올린 참조 ).

일반적으로 절대 위치를 가진 요소가 부모 요소의 맨 위에 위치하는 한, 요소를 플로팅하여 해결 방법을 찾을 가능성이 높습니다.

---

Feeela 는 옳지 만 다음과 같이 위치를 바꾸면 부모div요소가 자식 요소로 계약 / 확장 될 수 있습니다div.

.parent{
    postion: 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 */
}

이것은 당신을 위해 작동합니다.

---

이것을 해결하는 아주 간단한 방법이 있습니다.

부모 div의 display : none을 사용하여 상대 div의 child1 및 child2의 내용을 복제하면됩니다. child1_1과 child2_2를 말합니다. child2_2를 맨 위에 놓고 child1_1을 맨 아래에 놓습니다.

jquery (또는 무엇이든)가 절대 div를 호출 할 때 display : block AND visible : hidden으로 상대 div (child1_1 또는 child2_2)를 설정하십시오. 친척 아이는 여전히 보이지 않지만 부모의 div는 더 높아질 것입니다.

---

나는 비슷한 문제가 있었다. 이 문제를 해결하기 위해 (본문, 문서 또는 창을 사용하여 iframe의 높이를 계산하는 대신) 전체 페이지 내용을 감싸는 div를 만든 다음 (예 : id = "page"가있는 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; }

해킹 div의 위치를 ​​조정하여 자식 위치의 위치에 영향을 줄 수 있습니다.

스 니펫은 다음과 같습니다.

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>

---

순수한 JavaScript를 사용하면 getComputedStyle () 메서드를 사용 하여 static position자식 요소 의 높이를 검색 한 다음 HTMLElement.style 속성을 사용하여 동일한 자식에 대한 검색 값을 설정하면 됩니다..child1padding-top

---

위에서 설명한 내용의 실제 예를 보려면 다음 코드 스 니펫 을 확인하고 실행하십시오 .

/* 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>

---

나는 사랑하지 않지만 일을 끝내는 다른 해결책을 생각해 냈습니다.

기본적으로 중복 요소가 보이지 않도록 하위 요소를 복제하십시오.

<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;
}

해당 하위 요소에 마크 업이 거의 없으면 영향이 적습니다.

---

"고정 높이를 사용하거나 JS를 포함해야합니다."

Here is the JS example:

---------- jQuery JS example--------------------

    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);

---

There is a better way to do this now. You can use the bottom property.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

---

This is very similar to what @ChrisC suggested. It is not using an absolute positioned element, but a relative one. Maybe could work for you

<div class="container">
  <div class="my-child"></div>
</div>

And your css like this:

.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/

---

Also consider next approach:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

Also since you are trying to reposition divs consider css grid

---

Absolute views position themselves against the nearest ancestor that isn't statically positioned (position: static), therefore if you want an absolute view positioned against a given parent, set the parent position to relative and the child to position to absolute

---

Try this, it was worked for me

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

It will set child height to parent height

참고URL : https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height