пристыковака блока по вертикали
Добрый день.
Возникла такая задачка. Сайт состоит из трёх блоков: header, content, footer. Все они во всю ширину документа. Для header и footer высота известна, скажем 50px, для content - зависит собственно от содержимого. Требуется, чтобы в случае, когда содержимое content мало и умещается на экране, то footer был не сразу под ним, а стыковался к низу экрана, причём в случае resize'а он не плавал за нижней рамкой окна. А если содержимого много и размер документа превышает окно, то тогда как обычно - footer идёт сразу под content, возникает скроллинг. Т.е. грубо говоря нужно следующее: если максимальное разрешение по высоте окна браузера равно y, то минимальная высота документа становится y, и footer всегда стыкуется ровно к низу документа. Спасибо за внимание) |
В интернете есть решения. Нужно только поискать;)
|
Решение то в принципе есть http://www.xiper.net/html-and-css-tr...al-k-nizu.html
использовать min-height у содержимого и отрицательный margin-top у футера.
<html>
<head>
<title>Футер прижат к низу</title>
<style type="text/css">
* {margin: 0; padding: 0;} /* обнуляем отступы */
body {
background: #fff;
}
html,body {
height: 100%; /* задаем высоту тела документа */
}
.main { /* основной блок, который должен растянуться до подвала */
background: #999; /* цвет фона основного блока (для наглядности) */
min-height: 100%; /* задаем минимальную высоту основного блока */
}
* html .main { /* хак для ie6 */
height: 100%; /* для ие6, т.к. не понимает min-height */
}
.hFooter { /* это распорка в основном блоке - резервируем место для подвала */
height: 40px; /* высота нашего подвала */
}
.footer { /* подвал */
background: #0000CC; /* цвет фона подвала (для наглядности) */
color: #fff;
height: 40px; /* высота подвала */
margin-top: -40px; /* делаем отрицательный отступ по высоте равный высоте подвла, чтобы четко вписаться в размер экрана */
}
</style>
</head>
<body>
<div class="main">
Это основной блок
<div class="hFooter"></div>
</div>
<div class="footer">Это подвал</div>
</body>
</html>
НО! В итоге в элементах списка расположенных в нижней части контента, возникает баг в IE7 - некорректно работает mouseover/mouseout. |
Что там за баг не скажу, но можно попробовать сменить технику "подвал всегда снизу" Есть различные вариации
|
Выкристаллизовал проблему. Заодно и нашёл как от бага уйти. Проблема в ИЕ7 в том, что нижний li подсвечивается только пока курсор на его тексте(это также видно по тому как пропадает pointer).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
html, body, form
{
height: 100%;
}
.main
{
min-height: 100%;
}
li
{
border: White 1px solid;
width: 100%;
cursor: pointer;
}
.highlight
{
border-color: orange;
}
</style>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js"></script>
<script language="javascript" type="text/javascript">
$(function () {
$('li').hover(function () {
$(this).toggleClass('highlight');
}, function () {
$(this).toggleClass('highlight');
});
});
</script>
</head>
<body>
<form>
<div class="main">
<ul>
<li>
<div>
Текст запроса: Ангелы вернулись к Уралу
</div>
<div>
Период: все даты
</div>
</li>
</ul>
<div style="height: 2000px;">
</div>
<ul>
<li>
<div>
Текст запроса: Ангелы вернулись к Уралу
</div>
<div>
Период: все даты
</div>
</li>
</ul>
</div>
</form>
</body>
</html>
Проблема решается путём задания фона li, в данном случае white. Но откуда вообще эта проблема, теряюсь в догадках. |
Тема - аццкий баян!!! Пользуйтесь поиском!!!
|
Соглашусь с вами, уважаемый, тема названа "аццкобаянно".
Нужно было просто спросить почему в стандартном решение "прибивания футера" возникает такой-то баг. |
Остерегитесь от использования минус-марджинов без необходимости.
В Вашем случае может помочь задание футеру position: relative. |
Спасибо за совет)
|
| Часовой пояс GMT +3, время: 09:42. |