Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.08.2010, 14:47
Новичок на форуме
Отправить личное сообщение для skubche Посмотреть профиль Найти все сообщения от skubche
 
Регистрация: 29.07.2010
Сообщений: 7

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

Последний раз редактировалось skubche, 04.08.2010 в 16:19.
Ответить с цитированием
  #2 (permalink)  
Старый 04.08.2010, 15:35
Аватар для float
Профессор
Отправить личное сообщение для float Посмотреть профиль Найти все сообщения от float
 
Регистрация: 01.07.2010
Сообщений: 387

В интернете есть решения. Нужно только поискать
Ответить с цитированием
  #3 (permalink)  
Старый 04.08.2010, 16:18
Новичок на форуме
Отправить личное сообщение для skubche Посмотреть профиль Найти все сообщения от skubche
 
Регистрация: 29.07.2010
Сообщений: 7

Решение то в принципе есть 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.

Последний раз редактировалось skubche, 05.08.2010 в 09:33.
Ответить с цитированием
  #4 (permalink)  
Старый 04.08.2010, 23:26
Аватар для Cuprum
Аспирант
Отправить личное сообщение для Cuprum Посмотреть профиль Найти все сообщения от Cuprum
 
Регистрация: 10.01.2010
Сообщений: 33

Что там за баг не скажу, но можно попробовать сменить технику "подвал всегда снизу" Есть различные вариации
Ответить с цитированием
  #5 (permalink)  
Старый 05.08.2010, 09:23
Новичок на форуме
Отправить личное сообщение для skubche Посмотреть профиль Найти все сообщения от skubche
 
Регистрация: 29.07.2010
Сообщений: 7

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

Последний раз редактировалось skubche, 05.08.2010 в 09:57.
Ответить с цитированием
  #6 (permalink)  
Старый 05.08.2010, 10:31
Профессор
Отправить личное сообщение для Sweet Посмотреть профиль Найти все сообщения от Sweet
 
Регистрация: 16.03.2010
Сообщений: 1,618

Тема - аццкий баян!!! Пользуйтесь поиском!!!
Ответить с цитированием
  #7 (permalink)  
Старый 05.08.2010, 11:55
Новичок на форуме
Отправить личное сообщение для skubche Посмотреть профиль Найти все сообщения от skubche
 
Регистрация: 29.07.2010
Сообщений: 7

Соглашусь с вами, уважаемый, тема названа "аццкобаянно".
Нужно было просто спросить почему в стандартном решение "прибивания футера" возникает такой-то баг.
Ответить с цитированием
  #8 (permalink)  
Старый 05.08.2010, 20:36
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Остерегитесь от использования минус-марджинов без необходимости.
В Вашем случае может помочь задание футеру position: relative.
Ответить с цитированием
  #9 (permalink)  
Старый 08.08.2010, 13:50
Новичок на форуме
Отправить личное сообщение для skubche Посмотреть профиль Найти все сообщения от skubche
 
Регистрация: 29.07.2010
Сообщений: 7

Спасибо за совет)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Javascript : появление блока из под другого блока KingR Элементы интерфейса 3 12.05.2010 21:40
Управление содержимым блока brainiac Элементы интерфейса 1 12.04.2010 13:34
Скрытие, показ определённого div блока. Flashton Events/DOM/Window 5 11.04.2010 23:44
Размещение блока, вопрос. Apri (X)HTML/CSS 0 26.03.2010 08:44
Скрытие блока после потери фокуса Nubi jQuery 2 06.02.2009 22:58