CSS, чтобы нижний колонтитул HTML оставался в нижней части страницы с минимальной высотой, но не перекрывал страницу - PullRequest
Новая
       65

CSS, чтобы нижний колонтитул HTML оставался в нижней части страницы с минимальной высотой, но не перекрывал страницу

291 голосов
/ 13 марта 2009

У меня была следующая страница (deadlink: http://www.workingstorage.com/Sample.htm), в которой есть нижний колонтитул, который я не могу расположить внизу страницы.

Я хочу, чтобы нижний колонтитул

  • придерживаться нижней части окна, когда страница короткая, а экран не заполнен, и
  • оставайтесь в конце документа и двигайтесь вниз, как обычно, когда содержание превышает несколько экранов (вместо того, чтобы перекрывать содержимое).

CSS наследуется и сбивает меня с толку; Кажется, я не могу изменить его должным образом, чтобы установить минимальную высоту содержимого или заставить нижний колонтитул перейти к нижней части.

Ответы [ 22 ]

0 голосов
/ 16 января 2018

Вы можете сделать это 

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  text-align: center;
}
0 голосов
/ 19 декабря 2016

Я использовал во многих своих проектах и ​​никогда не получал ни одной проблемы :)

для справки, код в фрагменте 

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
	height: 100%;
	margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */
  background:green;
}
.footer, .push {
	height: 50px; /* .push must be the same height as .footer */
}

.footer{
  background:gold;
  }
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
  <div class="wrapper">
    Content Area
    </div>
  
  <div class="push">
    </div>
  
  <div class="footer">
    Footer Area
    </div>
</body>
</html>
Страница:
...