2011-02-01 4 views
2

Как показать div.bottom высоты около 100px в нижней части страницы. Если высота содержимого меньше высоты окна, в нижней части окна будет отображаться div.bottom. Если высота содержимого больше высоты окна, она будет показана внизу страницы.div внизу страницы?

ответ

1

Что вы говорите, называется липким нижний колонтитул, и это можно сделать только с помощью html и css. Основная идея - использовать обертку с heights: 100% и отрицательный запас, чтобы переместить его выше самого дна. Stole the code snippet from here и here:

<body> 
    <div class="wrapper">content here! 
     <div class="push"></div> 
    </div> 

    <div class="footer">footer content</div> 
</body> 

* { 

    margin: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
    .wrapper { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */ 
    } 
    .footer, .push { 
    height: 142px; /* .push must be the same height as .footer */ 
    } 
2

Вам нужно что-то вроде этого?

<div style="position:absolute; bottom:0;">Hi</div> 

http://jsbin.com/ayaqo4

+0

это требует ли вы абсолютно позиционировать все остальное? Похоже, что это покроет вещи, если вы не будете осторожны. –

+0

нет, в этом случае, когда я прокручиваю страницу вниз, div.bottom перемещается вверх. – coure2011

0

Вы должны использовать CSS,

div.pos_fixed_footer{ 
    position:fixed; 
    bottom:0%; 
    right:0px; 
    background:transparent url(../img/bg_header.png) repeat scroll center top; 
    width:100%; 
    height:40px; 
} 

, а затем вызвать в сценарии как этот

<div id="pos_fixed_footer"><?php include "footer.html"; ?></div> 
0

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

Просто реализовать код здесь http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

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