Не растягивается фон в Opera/FF

**fenixnt** · 14.01.2008, 03:20

Доброго времени суток. Страница по ширине резиновая, когда мало текста футер должен растягивать фон (их два правый и левый) и находится в самом низу страницы, а когда больше текста должен опускатся ниже.

Сделал вот так:

Код:

<!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=windows-1251" />
<title>футер</title>
<style type="text/css">
* { margin:0; padding:0;}
html { height:100%; }
body { min-height:100%;position:relative;}
* html body {height:100%;}
</style>
</head>
<body>
<div style="width:100%; background: url(bg_left.gif) left repeat-y; height:100%; ">
****<div style="width:100%; background:url(bg_right.gif) right repeat-y; height:100%">****Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы Текст страницы 
 *<div style="position: absolute; height:50px; width:100%; background:#999999; bottom:0px; left:0px;">
 *****Футер
 *</div>
****</div>
</div>
</body>
</html>

В данном случае IE прекрасно растягивает фон и футер находится внизу, чего нельзя сказать об Opera и FF.
Не могу понять почему фон не растягивается, объясните пожалуйста.

**Aykroyd** · 14.01.2008, 05:19

Потому что любой нормальный браузер не может посчитать height: 100% от min-height: 100%.

**fenixnt** · 14.01.2008, 13:21

Originally posted by Aykroyd@Jan 14 2008, 06:19
Потому что любой нормальный браузер не может посчитать height: 100% от min-height: 100%.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Если задать height:100%, для всех браузеров, то футер всегда внизу окна браузера даже когда много текста страницы. Скорее всего из-за того, что для футера задано абсолютное позиционирование. Можно ли заставить, что бы футер растягивал фон страницы и находился внизу страницы?

**Aykroyd** · 14.01.2008, 15:52

Originally posted by fenixnt@Jan 14 2008, 14:21
Если задать height:100%, для всех браузеров, то футер всегда внизу окна браузера даже когда много текста страницы.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вы это мне решили объяснить?

Originally posted by fenixnt@Jan 14 2008, 14:21
Скорее всего из-за того, что для футера задано абсолютное позиционирование.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вовсе не из-за этого...

Originally posted by fenixnt@Jan 14 2008, 14:21
Можно ли заставить, что бы футер растягивал фон страницы и находился внизу страницы?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Можно. Только давайте для начала будем называть вещи своими именами. Вот это вот Ваше: «футер растягивал фон страницы» – ну абсурд, согласитесь?) Как вообще футер может что-то там «растягивать»? Тем более фон какого-нибудь другого элемента.

Вариант №1.
Оставьте все так, как у Вас есть. Только не плодите лишние ДИВы и назначьте bg_left.gif для элемента html, а bg_right.gif – для элемента body. Увидите, что Ваша проблема решится «сама собой».

Вариант №2.
см. разметку и CSS webstandards.org.ru

**fenixnt** · 14.01.2008, 19:26

Originally posted by Aykroyd@Jan 14 2008, 16:52
Вы это мне решили объяснить?*
Вовсе не из-за этого...
Можно. Только давайте для начала будем называть вещи своими именами. Вот это вот Ваше: «футер растягивал фон страницы» – ну абсурд, согласитесь?) Как вообще футер может что-то там «растягивать»? Тем более фон какого-нибудь другого элемента.

Вариант №1.
Оставьте все так, как у Вас есть. Только не плодите лишние ДИВы и назначьте bg_left.gif для элемента html, а bg_right.gif – для элемента body. Увидите, что Ваша проблема решится «сама собой».

Вариант №2.
см. разметку и CSS webstandards.org.ru
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Рассуждал вслух.

Согласен, абсурд. Иными словами, страница растянута на 100 процентов от высоты страницы, а футер тем временем всегда прибит к низу. Проблема вся в том, что страница будет не на всю ширину экрана, а по середине и body уже занят одним бэкграундом (картинкой).

**Aykroyd** · 14.01.2008, 20:03

Originally posted by fenixnt@Jan 14 2008, 20:26
страница растянута на 100 процентов от высоты страницы
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Бу-га...

Originally posted by fenixnt@Jan 14 2008, 20:26
Проблема вся в том, что страница будет не на всю ширину экрана, а по середине и body уже занят одним бэкграундом (картинкой).
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Знаете, смотреть надо конкретный дизайн. Так, не глядя, сложно что-либо посоветовать...

**fenixnt** · 14.01.2008, 20:39

Originally posted by Aykroyd@Jan 14 2008, 21:03
Бу-га...*
Знаете, смотреть надо конкретный дизайн. Так, не глядя, сложно что-либо посоветовать...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
:biggrin2: Надо же сам не заметил. Страница тянется на всю высоту окна браузера (то есть это минимамальная высота). Возможно ли реализовать эту задачу с таким расположением дивов?

**Aykroyd** · 14.01.2008, 21:07

Originally posted by fenixnt@Jan 14 2008, 21:39
Страница тянется на всю высоту окна браузера
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Аминь. Мои поздравления. Искренне.)

Originally posted by fenixnt@Jan 14 2008, 21:39
Возможно ли реализовать эту задачу с таким расположением дивов?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Возможно всё. Но говорю же, от конкретного дизайна все зависит...

**fenixnt** · 14.01.2008, 22:16

Originally posted by Aykroyd@Jan 14 2008, 22:07
Аминь. Мои поздравления. Искренне.)
Возможно всё. Но говорю же, от конкретного дизайна все зависит...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

Минимальная высота страницы - 100% от высоты окна браузера. максимальная - бесконечная.

. В данном примере, который я подемонстрировал в виде коде, можно это исполнить? Что то я потихоньку прихожу к выводу, что нельзя сделать.
Дезигн в скрепке

**Aykroyd** · 14.01.2008, 22:22

Что-то я ничего не понял. Какой именно фон там тянуться-то должен до футера??? Какого элемента? И нужна ли резина сразу тоже скажите.

**fenixnt** · 14.01.2008, 23:26

Originally posted by Aykroyd@Jan 14 2008, 23:22
Что-то я ничего не понял. Какой именно фон там тянуться-то должен до футера??? Какого элемента? И нужна ли резина сразу тоже скажите.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Страница тянется по ширине окна. Боковые фоны это детали блокнота то есть при увеличении разрешения блокнот должен тянутся по ширине. Если текста мало например страница с контактами где 2-3строчки то футер (копирайты, ручка, создание сайта) должен быть прибит к низу. В итоге получается, что имеем три основных дива (левый,центральный и правый). Центральный резиновый, правые и левые блоки фиксированного размера. Центральный разделен на три дива левый и правый с бэкграундом (левая и правая часть блокнота). В скрепке как это выглядит на 1024х768 и 1280х1024 сейчас.

**Aykroyd** · 15.01.2008, 01:01

Originally posted by fenixnt@Jan 15 2008, 00:26
Центральный разделен на три дива левый и правый с бэкграундом (левая и правая часть блокнота).
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Вы издеваетесь?

Вот это вот:
[attachment=7318:attachment]
пихаем в html:

Код:

html {background: url(bg1.gif) repeat-y left top; height: 100%;}

А вот это вот:
[attachment=7319:attachment]
пихаем в body:

Код:

body {background: url(bg2.gif) repeat-y right top; min-height: 100%; position: relative;}

Все так, как я Вам и писал выше. Какие еще отдельные части блокнота?! Зачем?

**fenixnt** · 15.01.2008, 12:53

Originally posted by Aykroyd@Jan 15 2008, 02:01
Вы издеваетесь?*

Вот это вот:
[attachment=7318:attachment]
пихаем в html:

Код:

html {background: url(bg1.gif) repeat-y left top; height: 100%;}

А вот это вот:
[attachment=7319:attachment]
пихаем в body:

Код:

body {background: url(bg2.gif) repeat-y right top; min-height: 100%; position: relative;}

Все так, как я Вам и писал выше. Какие еще отдельные части блокнота?! Зачем?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

Сделал я как Вы посоветовали с самого начали, пришел к тому же. Просмотрел пример, который Вы приводили в другой теме. В результате получилось следующее.

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<style type="text/css">
* {margin: 0px; padding: 0px;}
html {height: 100%;background:url(bg_left.gif) right repeat-y;}
body { min-height: 100%; position: relative;background: url(bg_left.gif) left repeat-y;}
* html body {height: 100%;}
#content { padding-bottom: 80px; overflow: hidden;background:#666666; margin-left:33px;margin-right:33px; height:100%}
#footer {background: #FFFFCC; width: 100%; height: 80px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>
</head>
<body>
<div id="content">
Основной контент * 
</div>
****<div id="footer">
****</div>
</body>
</html>

Серый фон который у content background:#666666; не растянут до футера. Как этого добится?

**Aykroyd** · 16.01.2008, 01:01

Originally posted by fenixnt@Jan 15 2008, 13:53
Серый фон который у content background:#666666; не растянут до футера. Как этого добится?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Никак. Потому что:

1. Это никому не нужно (даже Вам, просто Вы об этом пока не подозреваете).
2. Никакого серого фона у content нет в том примере, который я приводил в другой теме.
3. Никакого серого фона у content нет в том эскизе, который Вы прикрепляли в этой теме.

P.S. Такое ощущение, что прикрепленные мной изображения Вы не скачивали...

**fenixnt** · 16.01.2008, 01:35

Originally posted by Aykroyd@Jan 16 2008, 02:01
Никак. Потому что:

1. Это никому не нужно (даже Вам, просто Вы об этом пока не подозреваете).
2. Никакого серого фона у content нет в том примере, который я приводил в другой теме.
3. Никакого серого фона у content нет в том эскизе, который Вы прикрепляли в этой* теме.

P.S. Такое ощущение, что прикрепленные мной изображения Вы не скачивали...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

На мой взгляд так намного симпатичнее будет смотрется, на то он и футер,чтобы быть внизу. Придется поколдовать с таблицами display:table. Фона не было я просто подправил под себя чтобы было видно. Прикрепленное Вами изображение то ли глюк был, то ли еще что то на форуме, рисунок не показывал была просто надпись attached что то вроде того. С каждым днем убеждаюсь, что блочная верстка имеет свои недостатки.

Тема: Не растягивается фон в Opera/FF

Опции темы

Поиск по теме

Отображение

Похожие темы

В Opera 9.6

Body не растягивается o_O

Opera 9

Opera 9.0

IE, Opera

Ваши права