Не растягивается фон в 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]
Знаете, смотреть надо конкретный дизайн. Так, не глядя, сложно что-либо посоветовать...

**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. Такое ощущение, что прикрепленные мной изображения Вы не скачивали...

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

Опции темы

Поиск по теме

Отображение

Комбинированный просмотр

Похожие темы

В Opera 9.6

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

Opera 9

Opera 9.0

IE, Opera

Ваши права