Фоновое изображение BODY обрезается в окне просмотра браузера

РЕШЕНИЕ
Я использовал решение, предложенное Романом ниже, основанное на добавлении дополнительного DIV с position: absolute , я тестировал его в IE7 , IE8, IE9, Chrome и Firefox и, похоже, работают нормально!

Итак, макет теперь имеет 3 полных фоновых изображения (что мне нужно), и даже вы можете использовать BODY bg, чтобы позаботиться об этом будут обрезаны до высоты окна просмотра браузера (все еще может быть полезно в некоторых случаях), "три с половиной" изображения bg с "липким нижним колонтитулом" :)

Единственным недостатком, который я обнаружил, является то, что ссылки в #footerContent не было "кликабельным", я решил это, используя position: relative к этому контейнеру.

Я внес изменения в предоставленный мной образец и загрузил его в свой Dropbox. В случае, если кто-то другой может счесть это полезным. Спасибо всем за ответы. http://dl.dropbox.com/u/512412/html_stackoverflow_solution.rar


Я загрузил

Я создаю довольно сложный макет для веб-сайта, где мне нужно иметь 3 фоновых изображения, покрывающих фон веб-страницы. Итак, у меня есть один в стиле HTML , один в стиле BODY и последний в стиле DIV , который является контейнером для всех элементов веб-страницы ( #contenedor )

Я также пою технику «липкого нижнего колонтитула» , чтобы нижний колонтитул «приклеивался» к нижней части страницы, где есть небольшое содержимое в область "основного содержимого".

У меня проблема в том, что изображение BODY bg обрезается в области просмотра веб-браузера, я имею в виду, Это не повторяется-y под видимой областью, отображаемой при загрузке страницы , а содержимое достаточно «высокое», чтобы можно было прокручивать веб-страницу.

То, что я пробовал до сих пор:

  1. Чтобы добавить дополнительный контейнер DIV , окружающий все (это нормально для меня), но при этом нарушается «липкий нижний колонтитул» (возможно, я не нашел правильный способ сделать это ... я не знаю).

  2. Force the ] BODY высотой с HTML с использованием:

     html> body {
    минимальная высота: 100%;
    высота: авто;
    высота: 100%;  }
     

Это решает проблему BODY, изображение повторяется, но при этом нарушается «липкий нижний колонтитул» ...: (

Вы можете увидеть образец:
Индексируйте с "мелким содержанием" все в порядке ... нижний колонтитул внизу и т. Д.
http://carloscabo.com/bg/index.htm

Индексная страница с высоким содержанием (простые BR ), прокрутите вниз, чтобы увидеть вырезку на BODY bg Image
http://carloscabo.com/bg/index_tall.htm

Вы также можете загрузить все файлы этого образца по следующему URL-адресу, чтобы сделать свое собственное локальный тест.
http://carloscabo.com/bg/stackoverflow_html.zip

5
задан Putuko 24 August 2011 в 20:13
поделиться