Как сделать div, чтобы плавать?

У меня есть 4 divs. Один из них - внешняя оболочка, а другие 3 - это заголовок, содержание и нижний колонтитул соответственно. Все они имеют одинаковую (фиксированную) ширину. Но высота внешней оболочки и содержимого div являются переменными.

независимо от их размера, я хочу, чтобы нижний колонтитул придерживался нижней части внешней обертки. Я попытался использовать следующий CSS

position: relative;
bottom: 0px;

Но это не сработало. Кто-нибудь знает решение?

Ответ 1

Чтобы выровнять div до нижней части, вы должны сначала сделать родительскую позицию div относительной. затем сделайте необходимое положение div абсолютным и установите для свойства bottom значение 0.

<div style="position: relative; height: 100px; border: solid;">
  <div style="position: absolute; height: 10px; border: solid; bottom: 0; right: 0;  left: 0; ">
  </div>
</div>

Ответ 2

Нижняя колонтитула должна быть либо:

position:absolute;bottom:0;; Это приведет его к нижней части контейнера, однако, когда вы прокрутите вниз мимо контейнера, нижний колонтитул будет прокручиваться вместе с ним.
position:fixed;bottom:0;; Это используется чаще для липких нижних колонтитулов. Это позволит разместить нижний колонтитул на bottom:0 вашего экрана. поэтому независимо от того, где вы прокручиваете, то, что вы видите, это то, что вы получаете (он не будет перемещаться во время прокрутки).
position:relative;bottom:0;; может быть использован, но он будет относиться к нему братьями и сестрами (т.е. если контент div не подталкивает его к дну, он туда не пойдет), или, я полагаю, если контейнер относительный, то он может работать (но пожалуйста исправьте меня, если я ошибаюсь).

Исходя из вашего вопроса: i want the footer div to stick at the bottom of outer wrapper. похоже, что вы хотите использовать позиционирование absolute для нижнего колонтитула, чтобы оно всегда касалось нижней части контейнера...

Если вы хотите, чтобы нижний колонтитул оставался в нижней части экрана независимо от того, куда прокручивается пользователь, я бы рекомендовал позиционирование fixed.

Определенно проверьте некоторые... учебные пособия и, самое главное, mess и экспериментируйте!

вы можете сделать нас jsfiddle и, возможно, он проливает больше света на то, что вы пытаетесь выполнить. удачи!

Ответ 3

Вы можете разрешить положение обертки относительно, а внутреннее положение Divs абсолютное.

<div style="position: relative; height: 200px">
    <div style="position: absolute; top: 0px; height: 20px; background-color:red">
        header
    </div>

    <div style="position: absolute; top: 20px; bottom: 20px; overflow-y: auto">
        content
    </div>

    <div style="position: absolute; bottom: 0px; height: 20px; background-color:red">
        footer
    </div>
</div>

Попробуйте http://jsfiddle.net/YAaA3/

Ответ 4

используйте clear, чтобы получить нижний колонтитул ниже содержимого.

просто -

#header {
 clear:both;
}
#footer {
 clear: both;
}

Это должно заставить заголовок быть сверху, а нижний колонтитул опуститься ниже плавающих элементов.

Ответ 5

<div>
  <div style="position: relative; height: 10%; top: 90%; ">
  </div>
</div>

Ответ 6

[ ОБНОВЛЕНО]

Вот CSS, что всегда прикрепляет нижний колонтитул к нижней части.

* DEMO *

CSS -

* {
    margin: 0;
}
html, body {
    height: 100%;
}
#ou {
    position:relative;
    background-color:grey;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    width:400px;
    margin: 0 auto -30px; /* the bottom margin is the negative value of the footer height */
}
#he
{
    height:30px;
    background-color:red;
}
#fo{
    background-color:yellow;
    height: 30px; /* .push must be the same height as .footer */
    position:relative;
    width:400px;
    margin:0 auto;
}