Как прикрепить footer к подвалу так, чтобы он зависел от выпадающего контента?

Question

На странице есть много скрытого контента, выпадающего по клику. Задача прижать footer к подвалу так, чтобы при наличии минимального контента на странице он находился в подвале, и отправлялся вниз при появлении выпадающего контента. Если footer задать правила position: absolute; и bottom: 0; выпадающий контент уезжает за footer и далее, а footer остается на месте. Сейчас footer прижат к контенту и находится посередине страницы. Сам код:

<body>
  <header>
<div class="container">
        <ul id="menu">
            <li>menu1</li>
            <li>menu2</li>
            <li>menu3</li>
        </ul>
    </div>
</header>
<div class="container">
    <p>*content*</p>
    <ul>
        <li>
            <span style="cursor:pointer;" onclick="return UnHide(this)">
                <span>Внутренний контент</span>
            </span>
            <div class="none">
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
                <p>*content*</p>
            </div>
        </li>
    </ul>
</div>
<footer>
  <div class="container">
        <p>*footercontent*</p>
        <p>*footercontent*</p>
        <p>*footercontent*</p>
      </div>
</footer>
</body>

*, *::after, *::before {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    transition: 0.5s ease-in-out;
}
header::after, .container::after, footer::after {
    content: "";
    display: table;
    clear: both;
}
ul {
    list-style: none;
}
header {
    width: 100%;
    padding: 10px 0;
    position: relative;
    background-color: #000;
    color: #fff;
}
.none {
  display: none;
}
.container {
    margin: 0 auto;
    padding: 0 15px;
}
footer {
    margin-top: 20px;
    width: 100%;
    padding: 30px 0;
    background: #aaa;
    color: #fff;
}

var UnHide = function(elem) {
    //console.log(elem);
    //console.log($(this));
    //console.log($(elem));
    $(elem).next('.none').toggle();
}

(протестировать можно тут https://jsfiddle.net/dirty159/8tnzo24c/13/) min-height вместе с calc не подходят: слишком много блоков на странице, и из-за адаптивной верстки деструктивно задавать им всем правила высоты, да еще и на каждый медиа запрос. Задавать высоту с помощью vh тоже не помогает. Footer так же прижимается в определённую точку и выезжающий контент выпадает за него и далее. Ну и в целом ломаёт вёрстку. Правильно ли я понимаю, что с помощью только CSS этого не добиться?

Answer 1

Вариант с помощью flex

var UnHide = function(elem) {
  //console.log(elem);
  //console.log($(this));
  //console.log($(elem));
  $(elem).next('.none').toggle();
}

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  transition: 0.5s ease-in-out;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 100vh;
}

header::after,
.container::after,
footer::after {
  content: "";
  display: table;
  clear: both;
}

ul {
  list-style: none;
}

header {
  width: 100%;
  padding: 10px 0;
  position: relative;
  background-color: #000;
  color: #fff;
}

.none {
  display: none;
}

.container {
  margin: 0 auto;
  padding: 0 15px;
  flex: 1px;
  width: 100%;
}

footer {
  margin-top: 20px;
  width: 100%;
  padding: 30px 0;
  background: #aaa;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<body>
  <header>
    <div class="container">
      <ul id="menu">
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
      </ul>
    </div>
  </header>
  <div class="container">
    <p>*content*</p>
    <ul>
      <li>
        <span style="cursor:pointer;" onclick="return UnHide(this)">
                <span>Внутренний контент</span>
        </span>
        <div class="none">
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
          <p>*content*</p>
        </div>
      </li>
    </ul>
  </div>
  <footer>
    <div class="container">
      <p>*footercontent*</p>
      <p>*footercontent*</p>
      <p>*footercontent*</p>
    </div>
  </footer>
</body>

Answer 2

На самом деле существует множество способов, как это сделать... Но, ежели не нужна поддержка старых браузеров, то самым продвинутым является способ показанный ниже:

html, body {
  height: 100%;
  margin: 0; padding: 0;
}

#wrapper {
  display: -webkit-flex;
  display:    -moz-flex;
  display:         flex;
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}

#main {
  -webkit-flex: 1 1 auto;
     -moz-flex: 1 1 auto;
          flex: 1 1 auto;
  background: orange;
  padding: 20px;
}

#header {
  -webkit-flex: 0 1 auto;
     -moz-flex: 0 1 auto;
          flex: 0 1 auto;
  background: green;
  padding: 20px;
}

#footer {
  -webkit-flex: 0 1 auto;
     -moz-flex: 0 1 auto;
          flex: 0 1 auto;
  background: green;
  padding: 20px;
}

<div id="wrapper">
  <div id="header">Header</div>
  <div id="main">По многочисленным заявкам радиослушателей, исполняется песня:<br/> <b>Я хочу быть роботом (Чехословакия 1986)</b>
</div>
  <div id="footer">Footer</div>
</div>

Answer 3

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

*, ::before, ::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: 'Roboto', sans-serif;
}

.container {
  width: 100%;
  display: block;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 15px;
}

header, footer, main {
  font-size: 22px;
  background-color: black;
  color: white;
  padding: 10px 0;
}

header, footer {
  background-color: #3be5df;
  color: black;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<header>
  <div class="container">
    Header
  </div>
</header>
<main>
  <div class="container">
    Main
  </div>
</main>
<footer>
  <div class="container">
    Footer
  </div>
</footer>

БЛОГ НА HUSL

Как прикрепить footer к подвалу так, чтобы он зависел от выпадающего контента?

Ответы (3 шт):