1

На странице есть много скрытого контента, выпадающего по клику. Задача прижать 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 этого не добиться?

3 ответа 3

2

Вариант с помощью 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>

1
  • Спасибо! То, что нужно.
    – Tony
    2 сен 2020 в 10:26
1

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

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>

0

@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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.