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

У меня есть следующая структура:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Я динамически загружаю содержимое в <article> с помощью javascript. Из-за этого высота блока <article> может измениться.

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

В данный момент я могу сделать то или другое... но не то и другое.

Итак, кто-нибудь знает, как я могу это сделать - заставьте <footer> придерживаться нижней части страницы/содержимого или нижней части экрана, в зависимости от того, что ниже.

Ответы

Ответ 1

Яркий нижний колонтитул Ryan Fait очень приятный, однако я считаю, что его основная структура не хватает *.

Моя базовая структура выбора:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Что еще не так далеко от:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

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

HTML:
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
CSS:
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}


#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Ответ 2

Липкий нижний колонтитул Ryan Fait - это простое решение, которое я использовал несколько раз в прошлом.

Основной HTML:

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="push"></div>
</div>
<div class="footer"></div>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Переведя это, чтобы быть похожим на то, что у вас уже есть результаты с чем-то в этом направлении:

HTML

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer height */
}
footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Просто не забудьте обновить негатив на краю обертки, чтобы соответствовать высоте вашего нижнего колонтитула и нажать div. Удачи!

Ответ 3

Я думаю, что ниже двух строк в css должно быть достаточно, чтобы получить то, что вы хотите.

#footer 
{ 
    position: relative ;
    bottom: 0;
}

Это сработало для меня.