Форум

skubche · #1 (**permalink**) 04.08.2010, 14:47

Добрый день.
Возникла такая задачка.
Сайт состоит из трёх блоков: header, content, footer. Все они во всю ширину документа. Для header и footer высота известна, скажем 50px, для content - зависит собственно от содержимого.
Требуется, чтобы в случае, когда содержимое content мало и умещается на экране, то footer был не сразу под ним, а стыковался к низу экрана, причём в случае resize'а он не плавал за нижней рамкой окна. А если содержимого много и размер документа превышает окно, то тогда как обычно - footer идёт сразу под content, возникает скроллинг.
Т.е. грубо говоря нужно следующее: если максимальное разрешение по высоте окна браузера равно y, то минимальная высота документа становится y, и footer всегда стыкуется ровно к низу документа.
Спасибо за внимание)

float · #2 (**permalink**) 04.08.2010, 15:35

В интернете есть решения. Нужно только поискать

skubche · #3 (**permalink**) 04.08.2010, 16:18

Решение то в принципе есть 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">
	&nbsp;&nbsp;Это основной блок
	&nbsp;&nbsp;<div class="hFooter"></div>
</div>
<div class="footer">Это подвал</div>
</body>
</html>

НО! В итоге в элементах списка расположенных в нижней части контента, возникает баг в IE7 - некорректно работает mouseover/mouseout.

Cuprum · #4 (**permalink**) 04.08.2010, 23:26

Что там за баг не скажу, но можно попробовать сменить технику "подвал всегда снизу" Есть различные вариации

skubche · #5 (**permalink**) 05.08.2010, 09:23

Выкристаллизовал проблему. Заодно и нашёл как от бага уйти. Проблема в ИЕ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.
Но откуда вообще эта проблема, теряюсь в догадках.

Sweet · #6 (**permalink**) 05.08.2010, 10:31

Тема - аццкий баян!!! Пользуйтесь поиском!!!

skubche · #7 (**permalink**) 05.08.2010, 11:55

Соглашусь с вами, уважаемый, тема названа "аццкобаянно".
Нужно было просто спросить почему в стандартном решение "прибивания футера" возникает такой-то баг.

subzey · #8 (**permalink**) 05.08.2010, 20:36

Остерегитесь от использования минус-марджинов без необходимости.
В Вашем случае может помочь задание футеру position: relative.

skubche · #9 (**permalink**) 08.08.2010, 13:50

Спасибо за совет)

Форум

Справочник

Discord чат

Курсы javascript