Добавление нижнего колонтитула, который всегда отображается внизу экрана? - PullRequest
Новая
       37

Добавление нижнего колонтитула, который всегда отображается внизу экрана?

9 голосов
/ 30 мая 2011

Как я могу добавить нижний колонтитул, который всегда находится внизу экрана, даже если содержимое страницы очень мало

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

ОБНОВЛЕНИЕ

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

Ответы [ 5 ]

13 голосов
/ 30 мая 2011

используйте следующие свойства CSS: 

position: fixed;
bottom: 0px;
11 голосов
/ 30 мая 2011

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

Вот версия flexbox: http://codepen.io/chriscoyier/pen/RRbKrL

HTML: 

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

CSS: 

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}
1 голос
/ 10 ноября 2014

Вот решение только для CSS, jQuery не требуется. Установите минимальную высоту обертки 100% и расположите ее относительно, затем расположите нижний колонтитул абсолютно слева внизу: 

#wrapper {
    min-height:100%;
    position:relative;
}

#content {
    padding-bottom:80px;
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

Источник

0 голосов
/ 18 июня 2018

Вы также можете использовать липкую позицию, как показано ниже: 

.footer {
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
}

Вы можете запустить этот код, чтобы увидеть, является ли этот тип нижним колонтитулом ищу. 

body {
  display: grid;
  min-height: 100vh;
  min-width: 100%;
  grid-template: "header main" "footer footer";
  grid-template-columns: 100px 1fr;
  grid-template-rows: 1fr 50px;
  grid-gap: 10px;
}

body>div {
  background-color: rgba(0, 51, 204, 0.5);
}

.header {
  grid-area: header
}

.main-content {
  grid-area: main;
  text-align: center;
}

.footer {
  grid-area: footer;
  position: sticky;
  position: -webkit-sticky;
  bottom: 0;
  z-index: 10;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Footer Stay!</title>
  <link rel="stylesheet" type="text/css" href="../style/footer.css">
</head>

<body>
  <div class="header">
    Header
  </div>
  <div class="main-content">main content</div>
  <div class="footer">footer </div>
</body>


</html>
0 голосов
/ 30 мая 2011

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

Допустим, вы используете div, чтобы охватить нижний колонтитул, вам понадобится такой css, как этот: 

div#footer{
  position: fixed;
  z-index: 1000000;
  overflow: hidden;
  bottom: 0px;
  left: 0px;
  height: 100px;
  width: 600px;
}

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

...