размещение фона CSS в нижней части окна без дополнительной разметки или минимальной высоты - PullRequest
2 голосов
/ 05 июня 2011

Можно ли расположить фоновое изображение внизу окна без лишних элементов или минимальной высоты?

Я пытаюсь получить изображение внизу окна, а не тело,независимо от того, насколько коротка веб-страница.

Я имею в виду, что если страница длиннее разрешения экрана по вертикали, браузер позволяет прокручивать страницу вниз, а изображение будет внизу (фон нижнего колонтитула)).

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

Я пробовал минимальную высоту, но для этого нужно, чтобы вы установили достаточно большую высоту, чтобы охватить самое большое разрешение, которое посещают люди.на вашем сайте, в свою очередь, могут создаваться большие пустые области, которые все еще остаются, если вы измените размер своего браузера (или если у людей экран меньшего размера).

Я попытался установить фон нижнего колонтитула на элемент body, но он зависает.Установка фона нижнего колонтитула на элемент html просто дала мне белую область внизу, поэтому я вместо этого использовал его для фона заголовка.

Основной макет моего сайта:

<html>
<body>
<div id="header">other elements and header stuff</div>
<div id="main">main content</div>
<div id="footer">other elements and footer stuff</div>
</body>
</html>

Ответы [ 2 ]

12 голосов
/ 05 июня 2011

Я бы сделал это так ...

html {
   min-height: 100%;   
}

body {
   background: url(path/to/image.png) no-repeat center bottom;   
}

jsFiddle .

0 голосов
/ 05 июня 2011

Вы имеете в виду липкий нижний колонтитул .

...