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

Question

решено
Я использовал решение, предложенное Романом ниже, основанное на добавлении дополнительного DIV с позицией : абсолютное , я протестировал его в IE7, IE8, IE9, Chrome и Firefox, и, кажется, работает нормально!

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

Единственный недостаток, который я обнаружил, заключался в том, что ссылки в #footerContent не были «кликабельными», я решил их, используя положение: относительно этого контейнера.

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

---

Я загрузил

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

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

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

Что я пробовал до сих пор:

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

2. заставить ТЕЛО быть таким же высоким, как HTML используя:

   html>body {  
   min-height:100%;  
   height:auto;  
   height:100%; }
   

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

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

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

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

Answer 1

По причине, которую я не совсем уловил, кажется, что тело застряло на высоте 100% от области просмотра. Он отказывается расти дальше этой точки и не наследует реальную высоту всей страницы.

Однако, если вы не возражаете добавить еще один вспомогательный div, вы легко решите проблему.

Сначала давайте начнем с HTML:
- Добавьте вспомогательный div перед секцией head.

<div id="contenedor">

    <!--HELPER DIV GOES HERE: BACKGROUND FIX-->
    <div id="bgfix"></div>

    <header id="arriba">
        ...
    </header><!--header#arriba-->

    ...

<div class="push"><!--Sticky Footer Push--></div>
</div><!--contenedor-->

А теперь давайте изменим CSS:
- Снимите фон с тела и поместите его в новый вспомогательный div, как показано ниже.

body {
    height:100%;
    min-height:100%
    text-align:center;
//  background:url(../img/bg_body.png) center top repeat-y;
    color:#fff;
}

#contenedor {
    position:relative; /* For #bgfix to attach here */
    ...
}

#bgfix {
    background:url(../img/bg_body.png) center top repeat-y;
    position: absolute;
    width: 100%; height: 100%;
    z-index:-1;
}

И ВОЙЛА!
Надеюсь, это поможет !!!

Answer 2

Решение, которое я нашел для этой проблемы, состоит в том, чтобы установить min-height равным

min-height: 900px;

900px, которое было фактической высотой фонового изображения, которое я использовал.

Answer 3

Мне нужно было бы точно узнать, чего вы хотите достичь, чтобы помочь вам лучше, но я приложу все усилия, чтобы заранее дать вам несколько советов

• , вы не должны применятьфон для тега HTML.
• не играет со свойством height вашего тела, оно испортит липкий нижний колонтитул, вместо этого естественный рост будет расти вместе с содержимым.
• body будет расти с содержанием, но html не будет.Тег html НЕ является контейнером.