내부 <div>를 부모 <div>의 맨 아래로 보내려면 어떻게해야합니까?

다른 div 그림 내부의 div와 아래 코드. 부모 div의 텍스트와 이미지가 있기 때문입니다. 그리고 빨간색 div는 부모 div의 마지막 요소입니다.

<div style="width: 200px; height: 150px; border: 1px solid black;">
    <div style="width: 100%; height: 50px; border: 1px solid red;">
    </div>
</div>

이것은 한 가지 방법입니다

<div style="position: relative; 
            width: 200px; 
            height: 150px; 
            border: 1px solid black;">

    <div style="position: absolute; 
                bottom: 0; 
                width: 100%; 
                height: 50px; 
                border: 1px solid red;">
    </div>
</div>

그러나 내부 div가 절대적으로 배치되므로 외부 div의 다른 내용과 겹치는 부분에 대해 항상 걱정해야합니다 (항상 고정 높이를 설정해야 함).

가능한 경우 내부 div를 외부 div의 마지막 DOM 객체로 만들고 "clear : both"로 설정하는 것이 좋습니다.

flexbox 방식.

HTML :

<div class="parent">
  <div>Images, text, buttons oh my!</div>
  <div>Bottom</div>
</div>

CSS :

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/*  not necessary, just to visualize it */

.parent {
  height: 500px;
  border: 1px solid black;
}


.parent div {
  border: 1px solid red;
}

편집하다:

소스 -Flexbox 안내서

Flexbox에 대한 브라우저 지원 -Caniuse

바깥 쪽 div position="relative"와 안쪽 div를 position="absolute"만들고로 설정하십시오 bottom="0".

요소 흐름에 영향을 미치지 않는 또 다른 순수한 CSS 트릭이 있습니다.

#parent {
  min-height: 100vh; /* set height as you need */
  display: flex;
  flex-direction: column;
  background: grey;
}
.child {
  margin-top: auto;
  background: green;
}

<div id="parent">
  <h1>Positioning with margin</h1>
  <div class="child">
    Content to the bottom
  </div>
</div>

리플 로우를 중단하기 때문에 절대 위치 지정을 원하지 않을 수 있습니다. 경우에 따라 더 나은 솔루션은 조부모 요소 display:table;와 부모 요소 를 만드는 것 display:table-cell;vertical-align:bottom;입니다. 이 작업을 수행 한 후 하위 요소를 제공 할 수 있어야하며 하위 요소 display:inline-block;를 자동으로 하위 요소 쪽으로 흐르게됩니다.

참고 : 이것이 최선의 방법은 아닙니다!

상황 : 나는 같은 thign을해야했다. 나는 여분의 div를 추가 할 수 없었기 때문에 내가 가진 것과 붙어 있었고 innerHTML을 제거하고 거의 2 렌더링과 같은 자바 스크립트를 통해 다른 것을 만드는 것이 아니라 하단 (애니메이션 막대).

해결책 : 당시 피곤한 점을 감안할 때 그러한 방법을 생각하는 것이 정상적인 것처럼 보이지만 막대 높이가 시작되는 부모 DOM 요소가 있음을 알았습니다.

더 이상 자바 스크립트를 엉망으로 만드는 대신 ( 항상 좋은 아이디어는 아님) CSS 답변을 사용했습니다! :)

-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);

그렇습니다. DOM을 배치하는 대신 CSS에서 부모를 거꾸로 뒤집 었습니다.

내 시나리오에서는 효과가 있습니다! 다른 사람도 가능합니다! 화염이 없다! :)

부모의 키를 알고 있다면 절대 div와 테이블을 피하는 방법은 다음과 같습니다.

<div class="parent">
    <div class="child"> <a href="#">Home</a>
    </div>
</div>

CSS :

.parent {
    line-height:80px;
    border: 1px solid black;
}
.child {
    line-height:normal;
    display: inline-block;
    vertical-align:bottom;
    border: 1px solid red;
}

JSFiddle :

예

<div style="width: 200px; height: 150px; border: 1px solid black;position:relative">
    <div style="width: 100%; height: 50px; border: 1px solid red;position:absolute;bottom:0">
    </div>
</div>