Как я могу получить фиксированный нижний колонтитул, как дизайн приложения Facebook - PullRequest
Новая
       10

Как я могу получить фиксированный нижний колонтитул, как дизайн приложения Facebook

1 голос
/ 23 марта 2009

Как я могу создать фиксированный нижний колонтитул, как дизайн приложения Facebook? Примеры с CSS приветствуются.

Дубликат Facebook, как статус Div

Ответы [ 4 ]

7 голосов
/ 23 марта 2009

Дается один путь здесь :

В HTML: 

<div id="container">
  <div id="content"></div>
  <div id="footer"></div>
</div>

В CSS: 

#container {
  position:absolute;
  min-height:100%;
}

#content {
  margin-bottom:100px; /* same as footer height */
}

#footer {
  position:absolute;
  bottom:0;
  height:100px; /* same as content margin-bottom */
}

Редактировать: Эта ссылка была основана на этот , который имеет некоторые исключения

3 голосов
/ 23 марта 2009

Нижний колонтитул Facebook остается на месте при прокрутке. Для этого вам понадобится такой HTML-код: 

<body>
  <div id="content">
    [content]
  </div>
  <div id="footer">
    [footer]
  </div>
</body>

и CSS вроде этого: 

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #f00;
}

CSS position: fixed инструктирует браузер сохранять фиксированную позицию этого элемента независимо от прокрутки.

1 голос
/ 23 марта 2009

Я нашел CSS Play действительно полезным сайтом.

http://www.cssplay.co.uk/

В частности, http://www.cssplay.co.uk/layouts/, для макетов.

0 голосов
/ 25 марта 2009

Больше примеров на CSS Sticky Footer .

Редактировать: Другой пример с немного очиститель CSS

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...