CSS: Выровнять div внизу

Question

Я пытаюсь выровнять div в нижней части родительского div. Я попытался следующие:

JS Fiddle

Я думал, что это будет работать:

.bottom-menu { 
    position: absolute; 
    bottom: 0; 
    height: 50px; 
    background-color: yellow; 
} 

Но, как вы можете видеть на скрипке он не работает. Как мне это сделать?

Answer 1

Вам также нужно указать width. также вы должны использовать position: relative для родителя (по умолчанию static). Смотрите обновленную скрипку: http://jsfiddle.net/wuf0m41z/1/

Answer 2

Можно также указать right и left свойства и установить их 0, вместо установки ширины исключительно:

HTML:

<div class="container"> 
    <div class="top-menu"></div> 
    <div class="bottom-menu"></div> 
</div> 

CSS:

.container { 
    height: 400px; 
    background-color: green; 
    position:relative; 
} 
.top-menu, .bottom-menu { 
    height: 50px; 
    background-color: yellow; 
} 
.bottom-menu { 
    position: absolute; 
    bottom: 0; 
    right:0; 
    left:0; 
} 

JSFiddle

Answer 3

Попробуйте!

.container { 
height: 400px; 
position: relative; 
background-color: green;} 

.top-menu { 
height: 50px; 
background-color: yellow;} 

.bottom-menu { 
height: 50px; 
background-color: yellow; 
position:absolute; 
bottom:0; 
width:100%;} 

Answer 4

Ваш код верный, просто нужно добавить ширину.

.bottom-menu { 
    position: absolute; 
    bottom: 0; 
    height: 50px; 
    background-color: yellow; 
    width:100%; 
} 

Answer 5

просто добавить position:relative; в контейнере и не forgetto добавить width:100%; к вашей нижней части меню.

вот пример: http://jsfiddle.net/leojavier/wuf0m41z/10/