div를 다른 div의 아래쪽에 붙이십시오 (창의 아래쪽이 아님)

Question

div가 항상 다른 div의 맨 아래에 있도록하고 싶습니다. 저는 bottom : 0, position : absolute를 사용했습니다. 이것은 윈도우가 메인 div와 같은 크기 (창 크기이기도 함) 인 한 작동하지만, 메인 div는 최소 높이 세트를 가지고 있습니다. 윈도우가 작아지면 div가 시작하여 div가 시작됩니다. 창 하단. vertical-align도 메인 div의 다른 div의 맨 아래에 붙이기 때문에이 목적으로는 작동하지 않지만 내 div의 하단에 있지는 않습니다.

어떻게하면됩니까?

Answer 1

당신은 그것을 위해 인 flexbox를 사용할 수 있습니다 나의 이해에서

.parent { 
 
    width: 50%; 
 
    height: 200px; 
 
    border: 1px solid grey; 
 
    margin: 1em auto; 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
} 
 
.child { 
 
    width: 60%; 
 
    height: 50px; 
 
    background: rebeccapurple; 
 
    margin-top: auto; 
 
}

<div class="parent"> 
 
    <div class="child"></div> 
 
</div>

Answer 2

, 당신은 사업부 항상 무슨 일이 있어도 사업부의 바닥에 고정되지 않은 있는지 확인하려면. 이 경우 부모 div가 position : relative를 가지고 있는지 확인해야합니다. 반면 child는 position : absolute를 가지며 절대적으로 div의 하단에 위치합니다.

부모 div의 최소 높이가있는 경우에도 화면 크기가 이에 영향을 미치지 않아야합니다.

하지만 코드를 게시하면 도움을 더 잘받을 수 있습니다.

HTML

<div class="parent"> 
    <div class="child"></div> 
</div> 

CSS :

<style> 
.parent { 
    position: relative; 
    min-height:--px 
} 
.child { 
    position: absolute; 
    bottom: 0; 
}