Закрепить фон изображения в нижней части документа в коротких и длинных документах - PullRequest
Новая
       6

Закрепить фон изображения в нижней части документа в коротких и длинных документах

2 голосов
/ 10 августа 2009

Я пытаюсь зафиксировать изображение в нижней части документа для HTML-страницы.

Моя стратегия примерно предусматривает установку CSS-высоты узла html на 100% и установку background-position of background-image в нижнюю часть.

Это работает для страниц с документом, который короче, чем размер области просмотра, но для документов, длина которых превышает размер области просмотра, фон располагается в середине страницы.

Не зная, будет ли документ длиннее области просмотра или нет, как я могу исправить фон в конце документа?

Мне удалось заставить его работать как требуется в Firefox только со следующим: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css"> 
* { 
margin:0; 
padding:0; 
} 

html { 
    height:100%; 
} 

.wrapper {
    background: #eaeaea url(ufford-logo.jpg) scroll repeat-x bottom center; 
    min-height: 100%;
}

</style> 
 </head> 
 <body>

  <div class="wrapper">

        <p style="height: 2000px;">test</p>

  </div>

 </body> 
</html>

Встроенный стиль тега p имитирует длинный документ.

Ответы [ 3 ]

3 голосов
/ 11 августа 2009

Это работает для меня в Firefox 3.5, IE8 / 7c, Chrome 2. Не работает в Opera 10b, но я ожидаю, что это будет работать в стабильной версии (9.6). 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html dir="ltr" lang="en">
<head profile="http://www.w3.org/2005/10/profile">
<style type="text/css">
* {
margin:0;
padding:0;
}
html, body {
    height: 100%;
    min-height: 100%;
}
.wrapper {
    background: #eaeaea url(http://sstatic.net/so/img/so/logo.png) scroll repeat-x bottom center;
    min-height: 100%;
}
</style>
 </head>

 <body>

  <div class="wrapper">
    <p style="height: 2000px;">test</p>
  </div>

 </body>
</html>
1 голос
/ 11 августа 2009

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

0 голосов
/ 11 августа 2009

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

#specialBackground {
    background-image: url(bg.png);
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: 100px;
    z-index: -1;
    position: absolute;
    bottom: 0;
}

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

Чтобы разделение находилось в нижней части области просмотра, когда посетитель прокручивает страницу, вам необходимо использовать JavaScript. Пример ниже: 

window.onscroll = function() {
document.getElementById("specialBackground").style.bottom = 
    (document.body.scrollTop * -1) + "px";
};

Надеюсь, это поможет.

РЕДАКТИРОВАТЬ: Я не знаю, сделал ли я это ясно - но вы не используете ваше деление "обертка", чтобы сделать это - вы добавляете еще одно пустое деление, которое помещается позади обертки из-за правил CSS. Таким образом, у вас будет это на вашей странице: 

<div id="specialBackground">&nbsp;</div>
<div id="wrapper">
...
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...