내부자를 보내려면 어떻게 해야 합니까?내부자를 보내려면 어떻게 해야 합니까?부모의 밑바닥까지부모의 밑바닥까지?

내부자를 보내려면 어떻게 해야 합니까?

부모의 밑바닥까지

?

아래의 다른 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"로 설정하는 것이 좋습니다.

플렉스박스 방식.

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

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

편집:

출처 - Flexbox 가이드

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

외부 디브 만들기position="relative"그리고 내면의 디브.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;부모의 아랫부분으로 자동적으로 흘러갈 것입니다.

참고: 이것은 결코 가능한 최선의 방법이 아닙니다!

상황: 나는 같은 일을 해야만 했다, 나는 추가적인 디브를 추가할 수 없었다, 그래서 나는 내가 가진 것에 집착했고 내부를 제거하는 대신에.HTML과 거의 2개의 자바스크립트를 통해 다른 것을 만드는 것은 콘텐츠를 하단(애니메이션 바)에 두어야 했습니다.

솔루션:당시 내가 얼마나 피곤했는지를 볼 때, 그런 방법을 생각하는 것조차 정상인 것처럼 보이지만, 나는 바의 높이가 시작되는 부모 DOM 요소가 있다는 것을 알았습니다.

더 이상 자바스크립트를 조작하는 대신 (항상 좋은 아이디어는 아닙니다) CSS 답변을 사용했습니다! :)

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

네 맞습니다, 저는 DOM을 배치하는 대신 CSS로 부모를 뒤집었습니다.

내 시나리오에서는 효과가 있을 것입니다!다른 사람들도 그럴 수 있어요! 불꽃은 없어요! :)

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

<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:

예

리플로우가 깨지기 때문에 절대 위치 지정을 원하지 않을 수도 있습니다. 경우에 따라 상위 요소를 table로 표시하고 상위 요소를 table-cell; vertical-align: bottom;으로 표시하는 것이 더 좋습니다.이 작업을 수행한 후 하위 요소에 인라인 블록 표시를 지정할 수 있어야 합니다. 그러면 요소는 자동으로 상위 요소의 아래쪽으로 흐르게 됩니다.

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

언급URL : https://stackoverflow.com/questions/2147303/how-can-i-send-an-inner-div-to-the-bottom-of-its-parent-div