div внизу страницы? - PullRequest
Новая
       3

div внизу страницы?

2 голосов
/ 01 февраля 2011

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

Ответы [ 5 ]

2 голосов
/ 01 февраля 2011

Вам нужно что-то подобное? 

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

http://jsbin.com/ayaqo4

1 голос
/ 01 февраля 2011

Это мой личный фаворит для липких колонтитулов:

http://www.cssstickyfooter.com/

1 голос
/ 01 февраля 2011

То, о чем вы говорите, называется липким нижним колонтитулом, и это можно сделать только с помощью html и css.Основная идея состоит в том, чтобы использовать обертку с heights: 100% и отрицательным полем, чтобы переместить ее выше самого дна. Украл фрагмент кода отсюда и здесь : 

<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 */
  }
0 голосов
/ 01 февраля 2011

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

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

0 голосов
/ 01 февраля 2011

Вам нужно использовать 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...