Полезная информация

Mozilla Россия — свежие версии программ Mozilla, а также масса полезной информации по каждому продукту.

№120-07-2006 15:50:16

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Привязка подвала по низу со сдвигом при увеличении контента

Упёрся в проблему при вёрстке. Понимаю, что туплю, но видимо случай выдался клинический.
Итак, смысл задачи:
только XHTML1.0 Strict и CSS,
только DIV-ы без применения таблиц,
требуется осуществить привязку подвала к низу экрана браузера в случае не полного заполнения по вертикали экрана контентом, но при переполнении есс-но подвал должен быть после контента.
Есс-но требуется совместимость с Gecko, IE и Opera. Как сделать такое средствами HTML с применением таблиц понятно. На свойства же CSS для контейнеров разные браузеры реагируют по разному (в особенности IE). Чую, что решение есть, но не вижу. Делать хак под разные браузеры не хочется, ибо не тот случай.
Вообщем хэлп.!

Отсутствует

 

№220-07-2006 16:35:54

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№320-07-2006 16:39:37

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Выделить код

Код:

<div class="pagemain1">
    ... тут текст страницы, включая охватывающий элемент
        для колонок
    <div class="bottomplaceholder"></div>
</div>
<div class="bottom1">
    ... тут футер
</div>

Отсутствует

 

№420-07-2006 16:40:26

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№520-07-2006 16:47:22

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№620-07-2006 16:50:47

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№720-07-2006 17:03:39

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№820-07-2006 17:17:57

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№920-07-2006 17:26:30

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№1020-07-2006 17:36:06

Lynn
Кофеман
 
Группа: Members
Откуда: Россия
Зарегистрирован: 16-02-2005
Сообщений: 1721
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№1120-07-2006 18:04:47

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№1221-07-2006 11:08:15

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

P.P.S. На самом деле, подходит только div верхнего уровня, содержащий весь контент. Все вложенные divы не будут становиться 100% от высоты документа, потому что height и min-height не задают высоту в процентах от высоты документа, они привязаны к окну. Точно по той же причине нельзя разместить рядом несколько divов 100%ной высоты - они будут разной высоты, если тот, который содержит весь контент, растянется больше высоты окна.

Отсутствует

 

№1322-07-2006 21:20:44

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Выделить код

Код:

<!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=windows-1251" />
    <title></title>
</head>
<body>

<style type="text/css">
html, body {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

div#bg1 {
    width: 100%;
    position: relative;
    background-color: #00FF7F;
}

div#bg2 {
    position: relative;
    width: 66%;
    margin-left: 34%;
    background-color: #B0C4DE;
}

div#bg3 {
    position: relative;
    width: 50%;
    margin-left: 50%;
    background-color: Aqua;
}

div#cont {
    position: relative;
    width: 300%;
    margin-left: -200%;
}
</style>

<div id="bg1"><div id="bg2"><div id="bg3">

<div id="cont">
test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
</div>

</div></div></div>

</body>
</html>

Отредактировано rowlad (22-07-2006 21:23:33)

Отсутствует

 

№1423-07-2006 03:12:35

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Во-первых, в разных браузерах отображается по-разному. Во-вторых, три вложенных divа по высоте контента можно сделать - это понятно.
А нужно:
1. Высота страницы - по высоте экрана, либо, если контента больше, то контента
2. По всей высоте страницы идет фон
3. Фонов три, и все сверху донизу, и это именно фоновое изображение
Вот пункт 3 и сложно реализовать.
Если писать по-человечески, это будет

Выделить код

Код:

HTML,BODY {height: 100%;}
DIV.pagemain1,DIV.pagemain2,DIV.pagemain3 {min-height: 100%; background-image: url(bg1.gif); background-position: left top; background-repeat: repeat-x;}
* html DIV.pagemain1,* html DIV.pagemain2,* html DIV.pagemain3 {height: 100%;}
DIV.pagemain2 {background-position: right top;}
DIV.pagemain3 {background-image: url(bg3.gif); background-position: center top;}

Но это не срабатывает из-за понимания 100% высоты.

Отсутствует

 

№1523-07-2006 12:35:09

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№1623-07-2006 13:17:06

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№1724-07-2006 11:28:29

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Вот пока что получается что так. Но в CSS, в отличие от таблиц, есть элемент фантастики. То, что считалось невозможным, оказывается возможным. Например, центрирование навигационной панели. Или сайт по высоте не меньше окна.

Отсутствует

 

№1824-07-2006 12:15:19

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Выделить код

Код:

<!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=windows-1251" />
    <title></title>
</head>
<body>
<style type="text/css">
div#bg_1 {
    background-image: url(img1.png);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

div#bg_2 {
    background-image: url(img2.png);
    height: 100%;
    margin-left: 34%;
    position: absolute;
    top: 0;
    width: 66%;
    z-index: 0;
}

div#bg_3 {
    background-image: url(img3.png);
    height: 100%;
    margin-left: 50%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 0;
}

div#bg1 {
    background-image: url(img1.png);
    position: relative;
    width: 100%;
}

div#bg2 {
    background-image: url(img2.png);
    margin-left: 34%;
    position: relative;
    width: 66%;
}

div#bg3 {
    background-image: url(img3.png);
    margin-left: 50%;
    position: relative;
    width: 50%;
}

div#cont {
    margin-left: -200%;
    position: relative;
    width: 300%;
}

html, body {
    height: 100%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 100%;
}

</style>


<div id="bg_1"><div id="bg_2"><div id="bg_3"></div></div></div>

<div id="bg1"><div id="bg2"><div id="bg3"><div id="cont">

test test test test test test test test test test test test  

</div></div></div></div>


</body>
</html>

Отредактировано rowlad (24-07-2006 12:53:43)

Отсутствует

 

№1924-07-2006 14:18:23

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

Боюсь, опять не работает. В Firefox 1.5. Можно ссылку на работающую версию (включая фоны)?
Браузеры, в которых обычно тестирую сайт:
Internet Explorer 5.0,5.5,6.0, Mozilla Firefox 1.5.0.4, Mozilla 1.5, Opera 7.01,7.11,7.50,8.50,9.0, под настроение - Konqueror 3.4, под большое настроение - Netscape 8.x.
Обоснование: IE: 5.0 - это Win2000, у 5.5 свои баги, 6.0 - последний релиз, который реально используется, 7.0b пока ставить не рискну, Firefox+Mozilla: со времен 1.5 в движке пара мелочей поменялась, Opera: разные баги во всех этих версиях, в 9.0 добавлены новые и исправлена часть старых. Скоро надо будет добавлять Fx 2.0b.

Отредактировано Al_H (24-07-2006 14:19:06)

Отсутствует

 

№2024-07-2006 15:10:27

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

№2124-07-2006 16:19:51

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

А почему в части браузеров, включая Internet Explorer, в любом случае полосы прокрутки, в том числе горизонтальная?
Но вообще стоит посмотреть, как это можно использовать... Возможно, возникнут трудности с margin-left.

Кроме того, рецепт не работает во всех Операх, кроме девятой.

Отредактировано Al_H (24-07-2006 16:21:22)

Отсутствует

 

№2224-07-2006 16:30:21

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Выделить код

Код:

<!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=windows-1251" />
    <title></title>
</head>
<body>
<style type="text/css">
div#bg_1 {
    background-image: url(img1.png);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}

div#bg_2 {
    background-image: url(img2.png);
    height: 100%;
    margin-left: 33%;
    position: absolute;
    top: 0;
    width: 66%;
    z-index: 0;
}

div#bg_3 {
    background-image: url(img3.png);
    height: 100%;
    margin-left: 50%;
    position: absolute;
    top: 0;
    width: 50%;
    z-index: 0;
}

div#bg1 {
    background-image: url(img1.png);
    position: relative;
    width: 100%;
}

div#bg2 {
    background-image: url(img2.png);
    margin-left: 33%;
    position: relative;
    width: 66%;
}

div#bg3 {
    background-image: url(img3.png);
    margin-left: 50%;
    position: relative;
    width: 50%;
}

div#cont {
    margin-left: -200%;
    position: relative;
    width: 300%;
    z-index: 1;
}

html, body {
    height: 100%;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    width: 100%;
}

</style>


<div id="bg_1"><div id="bg_2"><div id="bg_3"></div></div></div>

<div id="bg1"><div id="bg2"><div id="bg3"><div id="cont">

test test test test test test test test test test test test  

</div></div></div></div>


</body>
</html>

Отредактировано rowlad (24-07-2006 16:31:12)

Отсутствует

 

№2325-07-2006 18:26:42

Al_H
Away
 
Группа: Members
Откуда: SPb
Зарегистрирован: 10-06-2005
Сообщений: 5508

Re: Привязка подвала по низу со сдвигом при увеличении контента

В Опере при недостатке контента все равно появляется прокрутка.
Сильно плохеет IE <6.0 - за счет ширины блоков.
Но идея понятна, спасибо.

Отсутствует

 

№2425-07-2006 19:45:40

Lain_13
Забанен
 
Группа: Members
Откуда: Волшебная Страна
Зарегистрирован: 26-04-2006
Сообщений: 10320

Re: Привязка подвала по низу со сдвигом при увеличении контента

Справа в ФФ2.0б1 появилась полоска в 1% шириной с тем же фоном, что и в первой... видимо зря вы меняли 34% на 33%... Ж)
...убить билла... :D

Отредактировано Lain_13 (25-07-2006 19:46:25)

Отсутствует

 

№2525-07-2006 19:52:16

rowlad
Участник
 
Группа: Members
Откуда: Saint-Petersburg
Зарегистрирован: 30-07-2005
Сообщений: 390
Веб-сайт

Re: Привязка подвала по низу со сдвигом при увеличении контента

Отсутствует

 

Board footer

Powered by PunBB
Modified by Mozilla Russia
Copyright © 2004–2011 Mozilla Russia
Язык отображения форума: [Русский] [English]