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


Пользователь месяца
Ixman Ixman 1-й за Октябрь
Очков активности: 693 0 тем, 33 сообщения, 14 баллов репутации
Сайт: o5cat.ru
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

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

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

    yuran (yurbol.ru)
    Очков активности: 81 0 тем, 54 сообщения, 1 балл репутации

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

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

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

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

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

    Mandarin
    Очков активности: 42 0 тем, 28 сообщений, 1 балл репутации

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

    WGN (worldgamenews.com)
    Очков активности: 39 Вне конкурса за определение пользователя месяца

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

    pozitron123
    Очков активности: 31.5 2 темы, 15 сообщений, 1 балл репутации

  • Фотография алексс
    #8

    алексс
    Очков активности: 27 2 темы, 12 сообщений, 1 балл репутации

  • Фотография Mariko
    #9

    Mariko
    Очков активности: 16.5 1 тема, 8 сообщений, 1 балл репутации

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

    RosenRot (abuzov.com)
    Очков активности: 13.5 1 тема, 6 сообщений, 1 балл репутации

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


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

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

#1 gaaarfild

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

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

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

 

 

  • 0

#2 ZiTosS

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

Отправлено 30 April 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 May 2010 - 01:27

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

#4 ZiTosS

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

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

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

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

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

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

#5 gaaarfild

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

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

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

#6 ZiTosS

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

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

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

#7 gaaarfild

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

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

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

#8 Grumm

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

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

#footpanel {
bottom: 0;
}
  • 0

#9 ZiTosS

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

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

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

#10 gaaarfild

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

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

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

#11 Grumm

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

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

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

#12 ZiTosS

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

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

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

#13 Grumm

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

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

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

:|
  • 0

#14 gaaarfild

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

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

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

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

  • 0

#15 surfer

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

Отправлено 23 June 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 June 2010 - 20:57

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

#17 surfer

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

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

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

#18 Grumm

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

Отправлено 24 June 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
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

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

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

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

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

#20 Grumm

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

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

Первый пост:

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

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

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

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

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

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

robot

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


Похожие темы

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

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