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

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

0 голосов
/ 01 июня 2011

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

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

<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)

sketch http://i55.tinypic.com/ws9t1w.jpg

Я хочу, чтобы элемент div «credits» был выровнен внизу элемента div «contentinfo».И пусть пространство между div "Menu" и div "credits" будет пустым.Что-то вроде:

требуемый http://i52.tinypic.com/16aqn3d.jpg

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

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

1 Ответ

2 голосов
/ 01 июня 2011

¡Я сделал это!Это немного по-любительски, но это работает:

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

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

Вы можете увидеть это в 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;
}
...