절대 위치 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는 더 높아질 것입니다.

순수한 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>

나는 비슷한 문제가 있었다. 이 문제를 해결하기 위해 (본문, 문서 또는 창을 사용하여 iframe의 높이를 계산하는 대신) 전체 페이지 내용을 감싸는 div를 만든 다음 (예 : id = "page"인 div) 높이를 사용했습니다.

이 질문은 2012 년 flexbox 전에 요청되었습니다. 최신 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 bottom on mobile
    </p>
  </div>
</div>

CSS :

.parent {
  display: flex;
  flex-direction: column;
}

@media (max-width: 768px) {
  .parent {
    flex-direction: column-reverse;
  }
}

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

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

<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를 포함해야합니다."

다음은 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);

이 문제를 해결하는 매우 간단한 해킹이 있습니다.

솔루션을 설명하는 코드 샌드 박스는 다음과 같습니다. 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>

지금이 더 좋은 방법이 있습니다. bottom 속성을 사용할 수 있습니다.

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

또한 다음 접근법을 고려하십시오.

CSS :

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

또한 div의 위치를 ​​변경하려고하므로 CSS 그리드를 고려하십시오.

절대 정적 (위치하지 가장 가까운 조상에 위치 자체를 볼 position: static주어진 부모에 위치 절대보기, 설정 부모 원하는 때문에 경우) position에 relative와에 아이 position로를absolute

이것을 시도, 그것은 나를 위해 일했다

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

자식 높이를 부모 높이로 설정합니다.