CSS нижний колонтитул фиксированной ширины, нижней части экрана и по центру - PullRequest
Новая
       2

CSS нижний колонтитул фиксированной ширины, нижней части экрана и по центру

5 голосов
/ 12 августа 2011

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

Я хочу, чтобы мой нижний колонтитул имел следующие свойства:

  • Фиксированная ширина 640px
  • По центру
  • Прикреплено к нижней части экрана , а не к странице.Поэтому, когда пользователь изменяет размеры окна, нижний колонтитул всегда находится внизу

Все остальные стили, которые я могу сделать самостоятельно, это просто позиционное моделирование, которое мне кажется действительно сложным.

Можеткто-то, пожалуйста, объясните мне, как это сделать только с помощью CSS.

Ответы [ 2 ]

11 голосов
/ 12 августа 2011 
footer {
    width: 640px;
    margin: 0% -320px;
    position: fixed;
    left: 50%;
    bottom: 0%;
}

Пример: http://jsbin.com/imisig/3

Пример с кучами текста: http://jsbin.com/imisig/4

1 голос
/ 12 августа 2011

Поместите нижний колонтитул HTML в <div id="footer">. И CSS будет примерно таким: 

#footer {
    width: 640px;
    position: fixed;
    bottom: 0px;
    left: 50%;
    margin-left: -320px;
}

Объяснение

  • Свойство width устанавливает ширину 640px
  • position: fixed сделает так, чтобы он прокручивался со страницей
  • bottom: 0px фиксирует это в нижней части страницы (расстояние до низа = 0px)
  • left: 50% помещает левую сторону div в центр страницы
  • margin-left: -320px - теперь мы должны переместить его на 320 пикселей слева, чтобы сделать его центрированным
...