아래 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 이외의 방법으로이 작업을 수행하려고합니다.

답변

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

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

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

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

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