Как сделать фоновое изображение палкой в нижней части браузера

Я хотел бы иметь изображение нижнего колонтитула моего веб-сайта в нижней части браузера, когда содержание страницы коротки. Footer Image should stick to bottom of browser Как сделать фоновое изображение палкой в нижней части браузера

код CSS У меня есть для этого изображения:

#site-container {width:100%; background:url(.../site-bg-foot.jpg) no-repeat left bottom;}

и она прекрасно работает для страниц, где содержание дольше.

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

Спасибо

источник

2013-11-13 Juan Andres

Try:

position: fixed; 
bottom: 0;

Для колонтитула в вашем CSS

Я также рекомендую вам read this article в случае, приведенном выше ISNT совсем ваш вкус, вообще говоря:

HTML

<body> 
    <div id="wrapper"> 
     <div id="header"></div> 
     <div id="content"></div> 
     <div id="footer"></div> 
    </div> 
</body>

CSS

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
#header { 
    padding:10px; 
    background:#5ee; 
} 
#content { 
    padding:10px; 
    padding-bottom:80px; /* Height of the footer element */ 
} 
#footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

источник

2013-11-13 16:37:17 SW4

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

Ну, я нашел проблему !! .. У меня был некоторый избыточный код в моем css, я исправил его, и теперь он работает отлично! благодаря –

Вот jsfiddle, чтобы увидеть, что может решить вашу проблему.

Сначала я добавил position:fixed; и bottom:0; в категорию .footer.

HTML:

<div class="content"> 
<p>Praesent aliquam varius dolor.</p> 
</div> 

<div class="footer">Curabitur interdum, lorem quis feugiat interdum. 
</div>

CSS:

body { 
    margin:0; 
} 
.content { 
    width: 100%;  
    margin-bottom: 1em; 
} 

.footer { 
    position: fixed; 
    bottom: 0; 
    height: 50px; 
    width: 100%; 
    background-color: #e5e5e5; 
}

источник

2013-11-13 16:45:35 rileychuggins

Как сделать фоновое изображение палкой в ​​нижней части браузера

ответ

Смежные вопросы

Как сделать фоновое изображение палкой в нижней части браузера