Перейти к содержимому


× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 1008 Вне конкурса за определение пользователя месяца

  • Фотография OlgaGetman
    #2

    OlgaGetman
    Очков активности: 564 Вне конкурса за определение пользователя месяца

  • Фотография Vmir
    #3

    Vmir
    Очков активности: 528 4 темы, 32 сообщения, 8 баллов репутации

  • Фотография Mandarin
    #4

    Mandarin
    Очков активности: 306 10 тем, 21 сообщение, 4 балла репутации

  • Фотография ShowPrint
    #5

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 72 1 тема, 21 сообщение, 2 балла репутации

  • Фотография pozitron123
    #7

    pozitron123
    Очков активности: 67.5 3 темы, 6 сообщений, 3 балла репутации

  • Фотография Megoydagi
    #8

    Megoydagi (24ho.ru)
    Очков активности: 66 1 тема, 19 сообщений, 2 балла репутации

  • Фотография re-search
    #9

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

  • Фотография Constantine
    #10

    Constantine
    Очков активности: 39 4 темы, 14 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 20.04.2019
  • Яндекс выдача: 24.04.2019
Топ 5 участников по репутации


  • Закрытая тема Тема закрыта

Div'ная верстка. Всегда до низа страницы

#1 gaaarfild

gaaarfild
  • Неактивные
  • 596 сообщений
  • Репутация: 0
0

Отправлено 30 Апрель 2010 - 12:56

Как сделать при Верстке Div'ами? чтобы footer всегда был в низу страницы, если контента меньше, чем высота страницы. И, естественно, если контент больше, то уходил нормально за пределы страницы. Проще говоря, чтобы контейнер был всегда минимум на 100% по высоте растянут.

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 30 Апрель 2010 - 18:08

gaaarfild, предложу 2 варианта:
1) http://www.webcockta...-at-the-bottom/
2) На JS, нужно при загрузке страницы высчитать высоту окна и вставить для внешнего контейнера min-height с абсолютнгым значением.
  • 0

#3 gaaarfild

gaaarfild
    Topic Starter
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 01 Май 2010 - 01:27

А абсолютное позиционирование как может помочь, если контент будет больше высоты страницы? Будет налазить на него? =)
  • 0

#4 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 01 Май 2010 - 10:22

gaaarfild, это ты про первое?
Если да, то всё решается просто. Нужно будет добавить ещё один блок с прозрачным фоном, и указать ему отступ снизу в размере высоты footer. А в этот контейнер уже помещать наш остальной контент с фонами и без...

Если про второе, то под словами

вставить для внешнего контейнера min-height с абсолютным значением

имелось ввиду то, что абсолютное значение, это не проценты, а пиксели, параграфы, см или что либо ещё фиксированное.
  • 0

#5 gaaarfild

gaaarfild
    Topic Starter
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 01 Май 2010 - 13:59

Нет. Я исключительно про первое. =)
  • 0

#6 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 02 Май 2010 - 14:09

gaaarfild, ну так что, хочешь сказать, то что я предложил не катит? Идея реализуема просто, по идее, всё должно работать нормально.
  • 0

#7 gaaarfild

gaaarfild
    Topic Starter
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 03 Май 2010 - 01:39

Нет нет. Наоборот все здорово. =) Спасибо огромное.
  • 0

#8 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 20 Июнь 2010 - 12:32

#footpanel {
bottom: 0;
}
  • 0

#9 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 20 Июнь 2010 - 15:54

Grumm, вы сами-то проверяли что пишите?
  • 0

#10 gaaarfild

gaaarfild
    Topic Starter
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 20 Июнь 2010 - 21:29

Нет. =) Уверен, что нет! =)
  • 0

#11 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 23 Июнь 2010 - 14:54

Проблема то ведь не в footer.
Я бы переформулировал вопрос так:
Как прижать footer когда контента мало?
Идея (http://webmolot.com/...m-futer-k-nizu/) такая:
Вся страница в контейнере, где задана мин-высота 100%.
Вместо футера распорка, такой же высоты, как и футер.
Сам футер за контейнером со смещением на распорку.
Всё.
  • 0

#12 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 23 Июнь 2010 - 18:00

Grumm, перефразировать так вопрос будет неправильно, потому что вы решаете задачу только когда контента мало, а мы обсуждаем полностью кроссбраузерный вариант при любом количестве контента.
По крайней мере из ваших слов это следует.
  • 0

#13 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 23 Июнь 2010 - 19:21

вы сами-то проверяли что пишите?

:|
  • 0

#14 gaaarfild

gaaarfild
    Topic Starter
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 23 Июнь 2010 - 20:30

Потому что в вашем запросе, Grumm, я вижу такой путь исправления

#footpanel {
position: absolute;
bottom: 0;
}

  • 0

#15 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 23 Июнь 2010 - 20:46

даже так:

#container {
   position: relative;
   z-index: 10;		
}
#foot {
	position: absolute;
	z-index: 50;
	bottom: 0px;
}

а лучше изучить http://forum.htmlboo...?showtopic=5870
  • 0

#16 gaaarfild

gaaarfild
    Topic Starter
  • Неактивные
  • 596 сообщений
  • Репутация: 0

Отправлено 23 Июнь 2010 - 20:57

Нет. В вашем случае есть как-раз нежелательный эффект! =) Сам котейнер будет произвольного расстояния от нижней части экрана, а футер будет позиционироваться по отношению к нему. Z-index тут в принципе ненужен. =)
  • 0

#17 surfer

surfer
  • Заблокированные
  • 1 956 сообщений
  • Репутация: 71

Отправлено 23 Июнь 2010 - 21:11

согласен, но лучше по ссылке изучить материал
  • 0

#18 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 24 Июнь 2010 - 09:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="Shortcut Icon" href="images/favicon.ico" type="images/x-icon" />
<title>footer</title>
<style>
html, body {
width: 100%;
height: 100%;
}

#container {
position: relative;
width: 960px;
margin: 0 auto;
min-height: 100%;
}

#empty {height: 50px;
}

#footer {
position: relative;
width: 960px;
height: 50px;
margin: -50px auto 0;
}

#clearfloat {
clear: both;
}
</style>
</head>
<body>
<div id="container"> <!-- контейнер -->
<div id="content">
Основное наполнение
<!-- <img src="ris.png" /> Чтобы заполнить страницу -->
</div>

<div id="clearfloat"></div>
<div id="empty"> <!-- растяжка -->
</div>
</div>

<div id="footer">
Футер
</div>

</body>
</html>

  • 0

#19 ZiTosS

ZiTosS
  • Неактивные
  • 5 148 сообщений
  • Репутация: 8

Отправлено 24 Июнь 2010 - 11:20

Grumm, так конечно можно, но это не выход. Конечно это подойдет для отдельной HTML страницы, которая заведомо имеет меньшую высоту, чем убирается на экране.

Но попробуйте применить ваш способ на динамическом сайте, где страницы могут иметь высоту как выходящую за высоту рабочей области окна, так и не выходящей. Ваш блок растяжка в обоих случаях будет добавлять 50px в высоту, а если нужен больший отступ... Мы получим на ВСЕХ страницах огромное пустое место.

P.S.:
min-height: 100%;
данный атрибут не работает в IE6-7
  • 0

#20 Grumm

Grumm
  • Неактивные
  • 16 сообщений
  • Репутация: 0

Отправлено 24 Июнь 2010 - 13:30

Первый пост:

Как сделать... чтобы footer всегда был в низу страницы, если контента меньше, чем высота страницы...если контент больше, то уходил нормально за пределы страницы.

Запускаем скрипт (выше), смотрим...
Условия выполняются?Да!

...где страницы могут иметь высоту как выходящую за высоту рабочей области окна, так и не выходящей.

Так он и ведет себя так.

данный атрибут не работает в IE6-7

Ну здесь я рисанусь и скажу, что IE для меня не существует.
Если он не поддерживает официальные рекомендации W3C, это лично его проблемы и юзеров, которые его используют.
(Последнее не обсуждается, извините).
  • 0

robot

robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru