Как поместить плавающий div внизу страницы?

У меня есть веб-страница с заголовком, контентом с двумя столбцами и нижним колонтитулом. Левый столбец содержимого или contentinfo имеет переменный размер, поскольку он зависит от загруженной информации. В правом столбце или боковой панели есть два разных элемента div, один с меню, а другой с кредитами.

Что-то вроде:

<div id="header"></div>

<div id="contentinfo" style="float:left;"></div>
<div id="sidebar" style="float:right;">
    <div id="menu"></div>
    <div id="credits"></div>
</div>

<div id="footer" style="clear:both;">

Вы можете увидеть скетч: (Боковая панель — это просто div-контейнер)

эскиз

Что я хочу, так это поместить div кредитов, выровненный в нижней части div contentinfo. И пусть пространство между разделом меню и разделом кредитов будет пустым. Что-то вроде:

желаемый

Я попытался установить position:relative; в сайдбаре и position:absolute; внизу: 0px; в кредитах. Проблема в том, что я не могу установить определенную высоту для боковой панели, потому что я не знаю высоту содержимого. Однако в пробной версии я установил достаточно высокое значение высоты боковой панели, и код не работал.

Буду признателен за любую помощь.


html positioning css-float
person Octan    schedule 31.05.2011    source источник
comment
Я здесь новенький, поэтому не знаю, сделал ли я что-то не так. Ответ появился и исчез. Однако это не решило мою проблему из-за переменного размера моего div contentinfo. Спасибо, в любом случае.   -  person Octan    schedule 01.06.2011
comment
что было бы проще, если бы вы добавили код для просмотра и редактирования. Чтобы добавить код в свой пост, просто добавьте 4 пробела перед каждой строкой кода (включая пустые строки в вашем коде).   -  person Ashley Staggs    schedule 01.06.2011
comment
Я сделал это! Это немного дилетантски, но работает: я помещаю кредиты под нижний колонтитул с высотой: 100 пикселей; и положение: абсолютное; верх:-100px; На боковой панели я добавил пустой слот div высотой 100 пикселей. Таким образом я избегаю столкновений.   -  person Octan    schedule 01.06.2011

Ответы (1)


arrow_upward
2
arrow_downward

Я сделал это! Это немного на любителя, но это работает:

Я поместил «титры» под «нижним колонтитулом» с высотой: 100 пикселей; и положение: абсолютное; верх:-100px;

На боковой панели я добавил пустой div «слот» с высотой: 100 пикселей. Таким образом я избегаю столкновений.

Вы можете увидеть это в http://blog.tomtucker.cz.cc

HTML:

<!DOCTYPE html>
<head>
</head>

<body>

<div id="header">Header</div>

<div id="contentinfo" style="float:left;">Content</div>
<div id="sidebar" style="float:right;">
    <div id="menu">Menu</div>
    <div id="slot" style="height:100px">Slot</div>
    <!-- With that I avoid overlapping with the credits -->
</div>

<div id="footer" style="clear:both; position:relative;">Footer
    <div id="credits">Credits</div>
</div>

</body>
</html>

CSS:

body {
    width:600px;
}

#header {
    background-color:#F00;
    height:30px;
    width:600px;
}

#contentinfo {
    background-color:#CCC;
    height:600px; /* Any you want*/
    width:500px;
    float:left;
}

#sidebar {
    width:100px;
    float:right;
}

#menu {
    background-color:#00F;
    width:100%;
    height:70px;
}

#slot {
    background-color:#0F0;
    width:!00%;
    height:100px; /* The same as the credits div */
}

#footer {
    background-color:#FF0;
    position:relative;
    clear:both;
    height:30px;
    width:600px;
}

#credits {
    background-color:#609;
    position:absolute;
    height:100px;
    width:100px;
    top:-100px;
    left:500px;
}
person Octan    schedule 01.06.2011