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

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

Я знаю, что это должно происходить в CSS, но как мне сделать так, чтобы это пошло на дно? я попробую position: fixed; bottom: 0px;, но это идет ко дну, и когда я добавляю больше контента, он либо перекрывается, либо идет под контентом.

Редактировать: мне нужно, чтобы нижний колонтитул был регулируемой высотой. Другими словами, я не могу использовать height: 100px; или что угодно. Кроме того, я не хочу, чтобы нижний колонтитул прилипал к нижней части экрана, если содержание превышает размер страницы. Если высота экрана составляет 720px, а страница - 1200px, нижний колонтитул не должен быть внизу экрана. Это должно быть внизу страницы, вне поля зрения.

Как я могу исправить эту проблему? Я бы хотел без использования JavaScript.

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

<!DOCTYPE html>
<html>
    <head>
        <style>
            body
            {
                font-family: Lato;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }
            header
            {
                height: 80px;
                padding-left: 20px;
                padding-right: 5px;
                padding-top: 15px;
            }
            header h1
            {
                display: inline;
            }
            header nav
            {
                float: right;
                font-size: 18pt;
            }
            header nav a
            {
                color: #999;
                line-height: 50px;
                margin-right: 20px;
                text-decoration: none;
            }
            header nav a:hover
            {
                color: #666;
            }
            header nav a.currentPage
            {
                color: #7a7acc;
            }
            header nav a.currentPage:hover
            {
                color: #7a7acc;
            }
            footer
            {
                background-color: #f2f2f2;
                color: #666;
                font-size: 12pt;
                padding: 20px;
                text-align: center;
            }
            footer div
            {
                max-width: 750px;
                margin: 0px auto;
            }
            footer a
            {
                color: #666;
            }

        </style>
    </head>
    <body>
        <header>
            <h1>
                <img src="logo.png" />
            </h1>
            <nav>
                <a href="/" class="currentPage">Home</a>
                <a href="/services">Services</a>
                <a href="/news">News</a>
                <a href="/about">About</a>
                <a href="/contact">Contact</a>
            </nav>
        </header>
        <footer>
            <div>
                <p>Footer text. Footer text. Footer text.</p>
            </div>
        </footer>
    </body>
</html>
Источник

3 ответа

Решение

Используйте таблицы CSS:

FIDDLE1 - мало контента

FIDDLE2 - мало контента + большой колонтитул

FIDDLE3 - много контента

наценка

<header class="row">header content</header>
<div class="row">content here</div>
<footer class="row">footer content</footer>

CSS

html {
    height:100%;
    width:100%;
    }
body {
    height:100%;
    width:100%;
    display:table;
    table-layout:fixed;
    margin:0 auto;
    }
.row {
    display:table-row;
    background:orange
}
div.row {
    height:100%;
    background:pink
}
Источник

Это потому, что ваш контент не имеет ничего, так что нижний колонтитул будет расти.

Здесь у меня есть решение, если ваша структура такая

HTML

<header> header content goes here    </header>
<div class="container"> main content </div>
<footer> footer part </footer>

CSS

header { // header definitions  }
.container { 
       min-height: 500px;
       // other definitions  
}
footer { // footer definitions  }

Это будет придерживаться вашего нижнего колонтитула ниже 500px содержимого, даже если содержимое пусто.

Источник

Вы можете использовать автоматические поля flexbox

Минимальный пример:

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

footer {
  margin-top: auto;
  background: #999999;
}
<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

Используя тот же минимальный пример выше, но с длинным контентом:

body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; /* have the flex container at least take up the viewport */
  
  margin: 0;
  font-size: 20px;
}

div {
  height: 3000px;
}

footer {
  margin-top: auto;
  background: #999999;
}
<body>
  <header>Header</header>
  <div>Some random content</div>
  <footer>Footer</footer>
</body>

Используя код OP:

body {
  font-family: Lato;
  margin: 0px;
  padding: 0px;
  width: 100%;
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}

header {
  height: 80px;
  padding-left: 20px;
  padding-right: 5px;
  padding-top: 15px;
}

header h1 {
  display: inline;
}

header nav {
  float: right;
  font-size: 18pt;
}

header nav a {
  color: #999;
  line-height: 50px;
  margin-right: 20px;
  text-decoration: none;
}

header nav a:hover {
  color: #666;
}

header nav a.currentPage {
  color: #7a7acc;
}

header nav a.currentPage:hover {
  color: #7a7acc;
}

footer {
  margin-top: auto;
  background-color: #f2f2f2;
  color: #666;
  font-size: 12pt;
  padding: 20px;
  text-align: center;
}

footer div {
  max-width: 750px;
  margin: 0px auto;
}

footer a {
  color: #666;
}
<!DOCTYPE html>
<html>

<body>
  <header>
    <h1>
      <img src="logo.png" />
    </h1>
    <nav>
      <a href="/" class="currentPage">Home</a>
      <a href="/services">Services</a>
      <a href="/news">News</a>
      <a href="/about">About</a>
      <a href="/contact">Contact</a>
    </nav>
  </header>
  <footer>
    <div>
      <p>Footer text. Footer text. Footer text.</p>
    </div>
  </footer>
</body>

</html>

Источник

У меня была такая же проблема несколько недель назад с веб-сайтом, над которым я работаю, и после небольшого поиска и проб и ошибок мне удалось найти решение этой проблемы.

У меня есть здесь код, так как это немного сложно объяснить:

HTML:

<header>
    some header<br />
</header>
<section>
    <!-- no content -->

    <!-- little content -->
    <div id="little-content">some content</div>
    <!-- a lot of content -->
    <div id="lotsa-content">some more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more<br />and more content</div>
</section>
<footer>
    &copy; some footer
</footer>

CSS:

html,
body {
    margin: 0;
    min-height: 100%;
    position: absolute;
    width: 100%;
}

header,
footer {
    background: red;
    color: white;
    position: absolute;
    text-align: center;
    width: 100%;
}

section {
    margin: 1.3em 0;
}

#little-content {
    display: none;
}

#lotsa-content {
    display: none;
}

footer {
    bottom: 0;
}

Вот JSFiddle, который я сделал для тебя.

Надеюсь, это поможет.

EDIT1:

Чтобы быть более точным в ответе на ваш вопрос: вы должны сделать позицию родителя нижнего колонтитула (я думаю, что это тело) абсолютной и дать ему минимальную высоту 100% (также для его ширины), то же самое положение для нижний колонтитул (позиция: абсолютная;), а также прикрепить его к нижней части с нижней: 0; и последнее, что нужно сделать, это задать нижнее поле для высоты нижнего колонтитула, чтобы оно не перекрывалось (я также дал верхнее поле из-за того, что я также сделал заголовок абсолютным).

EDIT2:

Вот пример JSFiddle с предоставленным вами кодом.

Источник
Другие вопросы по тегам