Как заставить div придерживаться нижней части родительского div?

Может ли кто-нибудь помочь мне сделать 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>

Ответы

Ответ 1

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

Edited

Благодаря @centr0 и @T.J Crowder главное, чтобы понять здесь, что position:relative в .wrapper будет "содержать" любой элемент, имеющий position:absolute. Это как объявление границ для .bottom. Без position:relative в .wrapper, .bottom вырвется из этого div

Ответ 2

Я сталкиваюсь с аналогичной проблемой. Решение Val хорошо, но имеет один вопрос - внутренний div будет придерживаться дна, но он не повлияет на высоту parrent div, благодаря его "позиции: абсолютный"; (он выходит за пределы макета страницы).

Итак, вот мое расширенное решение для любого, у кого есть сходная проблема:

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

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

Как вы можете видеть, я установил высоту нижней части обложки .bottom. Недостатком является то, что высота нижнего колонтитула находится на двух местах. Но я думаю, что это хорошее решение, например, для списка продуктов, где фиксированная высота в нижнем колонтитуле окна (например, цена и т.д.).

Помните, что каждый раз, когда вы устанавливаете "position: absolute;", элемент будет абсолютно помещен против первого родительского div, который установил атрибут позиции. Или, возможно, против самой страницы.