div를 부모 div의 아래쪽에 붙이는 방법?

Question

아무도 나를 도울 수 div#bottom 부모의 하단에 div, 그래서 그 안에 버튼을 클릭하면 그 위에 div#list에서 요소를 표시 할 수 있습니까?

바람직 나는 등 JS, jQuery를, 피하고 싶은 것 또는 적어도 레이아웃에 :

<div class="wrapper"> 
    <div id="top"> 
    <ul> 
     ... 
     ... 
    </ul> 
    </div> 
    <div class="bottom"> 
     <div id="button"> 
     <div id="list"> 
      <ul> 
       <li>elem 1</li> 
       <li>elem 2</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

.wrapper{position:relative;} 
.bottom{position:absolute; bottom:0;} 

는 @ centr0 및 @TJ 크라우 을에

감사를 편집 여기에서 이해해야 할 중요한 점은 position:relative에서 .wrapper은 position:absolute을 가진 요소를 "포함"합니다. 그것은 .bottom에 대한 경계를 선언하는 것과 같습니다. position:relative이 .wrapper에 없으면 .bottom은 그 부분을 벗어날 것입니다. div

Answer 2

비슷한 문제가 있습니다. Val의 솔루션은 훌륭하지만 한 가지 문제가 있습니다. 내부 div가 하단에 붙어 있지만 "position : absolute"덕택에 parrent div의 높이에는 영향을 미치지 않습니다. (페이지 레이아웃 흐름에서 벗어났습니다). 당신이 볼 수 있듯이

.wrapper { 
    position: relative; 
    padding-bottom: 50px; 
} 

.wrapper .bottom { 
    position: absolute; 
    bottom: 0px; 
    height: 50px; 
} 

, 나는 래퍼의 .bottom 중앙 패딩 바닥의 높이를 설정 :

그래서 여기 사람이 가진 비슷한 문제에 대한 내 확장 솔루션입니다. 단점은 바닥 글의 높이가 두 곳에 있다는 것입니다. 그러나 나는 상자의 바닥 글에 고정 된 높이가있는 제품 목록 (예 : 가격 등)에 대한 좋은 솔루션이라고 생각합니다.

"position : absolute;"를 설정할 때마다 position 속성을 설정 한 첫 번째 상위 div에 대해 요소가 절대적으로 배치된다는 점에 유의하십시오. 또는 결과적으로 페이지 자체에 대한 것입니다.