Как прикреплять нижний колонтитул к нижней (не фиксированной) даже при прокрутке

Я учусь веб-разработке, и я просто не могу понять, что я делаю неправильно в этом. Я хочу, чтобы нижний колонтитул этой страницы оставался внизу, под всем содержимым, но не фиксировался на экране. Проблема в том, что когда тело имеет высоту более 100%, нижний колонтитул остается в середине экрана, а не внизу.

Я видел много учебных пособий о том, как этого добиться, используя "position: absolute" + "bottom: 0" и прочее, но все провалилось.

Проверьте это:

<html>
<head>
    <meta charset="iso-8859-1" />               
    <link rel="stylesheet" type="text/css" href="index.css" />
    <link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'>
    <title>Matheus Page</title>
</head>
<body>
    <div id="wrapper">
        <header>
            <div class="title-div">
                <h1>Title</h1>
            </div>

            <nav>
                <ul>
                    <li><h3>Home</h3></li>
                    <li><h3>Articles</h3></li>
                    <li><h3>Perfil</h3></li>
                    <li><h3>Settings</h3></li>
                </ul>
            </nav>
        </header>
        <div id="body">
            <p>Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste </p>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    <div>
</body>

CSS:

body {
    font-family: 'Arvo', serif;
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrapper {
   min-height:100%;
}

header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}

.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}

#body {
   padding:10px;
   padding-top:8%;
   padding-bottom:15%;   /* Height of the footer */
}

footer {
    position: absolute;
    width: 100%;
    height: 15%;
    right: 0;
    bottom: 0;
    left: 0;
    color: #FFD740; 
    background-color: #424242;
    clear: both;
}

ссылка на экран печати результата

Это моя первая веб-страница, и опять же, я искал в Интернете и нашел много решений, но не смог заставить работать. Кроме того, извините за мой английский, это не мой родной язык.

Ответ 1

Я думаю, это может помочь вам.

Просто покажу вам, как достичь того, чего вы хотите.

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#wrapper {
  min-height: 100%;
  position: relative;
}
#header {
  background: #ededed;
  padding: 10px;
}
#content {
  padding-bottom: 100px;
  /* Height of the footer element */
}
#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: absolute;
  bottom: 0;
  left: 0;
}

<div id="wrapper">

  <div id="header">
  </div>
  <!-- #header -->

  <div id="content">
  </div>
  <!-- #content -->

  <div id="footer">
  </div>
  <!-- #footer -->

</div>
<!-- #wrapper -->

Ответ 2

Принятый ответ может быть немного устаревшим, так как теперь у нас есть Flexbox. Задайте для контейнера min-height: 100vh а для min-height: 100vh колонтитула - margin-top: auto чтобы вам не приходилось иметь дело с абсолютным позиционированием и фиксированной высотой.

body {
    margin: 0;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.header {
    background-color: #FFCCCC;
}

.content {
    background-color: #CCFFCC;
}

.footer {
    background-color: #CCCCFF;
    margin-top: auto;
}

<div class="container">
    <div class="header">header</div>
    <div class="content">content</div>
    <div class="footer">footer</div>
</div>

Ответ 3

Вы можете попробовать этот стиль,

html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    margin-bottom: -100px;
    padding-bottom: 100px;
}
header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
}
.title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
}

header nav {
    position: absolute;
    width: 75%;
    left: 15%;
}

header ul {
    list-style: none outside none;
}

header ul  li{
    display: inline-block;
    margin: auto 2% auto 0; 
}
footer {
    height: 100px;
    padding-top: 15px;
    padding-left: 15px;
    color: #FFD740; 
    background-color: #424242;
}

Здесь - это демонстрация

Ответ 4

ответ, опубликованный @divy3993, работает, но иногда абсолютный колонтитул удерживает его в центре страницы. По крайней мере, что случилось со мной. Так что я сделал небольшое изменение, я выложу его ниже

#footer {
  background: #ffab62;
  width: 100%;
  height: 100px;
  position: relative; //make relative instead of absolute
  bottom: 0;
  left: 0;
}

Ответ 5

Вот что сработало для меня: когда я пробовал нижний 0 и правый 0, под нижним колонтитулом было какое-то раздражающее нижнее поле, которое не исчезало. Я установил это с верхом: 100% и абсолютной позицией:

body{
height: 100%;
width: 100%;
position: relative;

}

footer{
background-image: linear-gradient(to right, #c10f3f, #010168);
padding: 1em;
width: 100%;
top: 100%;
position: absolute;
}

Ответ 6

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

Для стартера просто удалите все абсолютные вещи и поставьте min-height только в div с именем "body" после того, как нижний колонтитул будет приклеен к #body по умолчанию, после чего ваш нижний колонтитул не будет летать туда, где он захочет.

Лучший способ использовать абсолютный в divs: - когда у вас уже есть div с относительным положением, а затем вы поместите другой div с абсолютной позицией внутри div с относительным положением.

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