1

Здравствуйте! Как сделать высоту вложенного блока 100% от высоты родителя, если у родителя задана min-height, но не задана height? в приведенном ниже коде тег main надо растянуть до футера, при том чтобы от перегрузки контентом блок не вылазил за футер снизу. онлайн пример: https://jsfiddle.net/pq9x7gjv/

UPD: при задании фиксированной высоты появляется проблема напозлания футера на main, пример тут: https://jsfiddle.net/mk0g8gk8/

HTML:

<body>
 <div class="wrapper">
  <header>
   header
  </header>
  <main class="data">
   data
  </main>
  <footer>
   footer
  </footer>
 </div>
</body>

CCS:

 html, body {
    width: 795px;
    height: 100%;
    margin: 0 auto;
  }

  .wrapper {
    min-height: 100%;
    position: relative;
    background-color: #d7ffd4;
    border: 1px solid gray;
  }

  header {
    height: 50px;
    width: 100%;
    background-color: pink;
  }

  .data {
    height: 100%;
    background-color: blue;
    border: 1px solid black;
  }

  .wrap {
    height: 100%;
    background-color: #7892ff;
  }

  footer {
    width: 795px;
    height: 50px;
    position: absolute;
    bottom: 0;
    background-color: yellow;
    border: 1px solid green;
  }
1

4 ответа 4

1

Решение было найдено мной, в данном случае высоту блока main я рассчитал с помощью vh единиц

min-height: calc(100vh - 50px);
0

Задайте родителю height: 1px. А у main height: calc(100% - высота header - высота footer. То есть height: calc(100% - 50px - 50px)

#parent {
  min-height: 600px;
  height: 1px;
  background: red;
}

header, footer {
  height: 50px;
  background: purple;
}

main {
  height: calc(100% - 50px - 50px);
  background: green;
}
<div id="parent">
  <header>header</header>
  <main>main</main>
  <footer>footer</footer>
</div>

8
  • не подходит, при перегрузке блока main контентом, он выходит за пределы main, а необходимо, чтобы блок растягивался по высоте от добавления контента. иными словами если добавить много текста в блок main, футер окажется над блоком main, а не внизу страницы, как надо 19 мар 2016 в 0:23
  • вот тут видна проблема: jsfiddle.net/mk0g8gk8 19 мар 2016 в 0:30
  • вы вариант с flexbox не рассматриваете?
    – dakiesse
    19 мар 2016 в 7:54
  • к сожалению нет, задача только CSS, HTML, блочная верстка без флексбоксов, без гридов и таблиц, без JS 19 мар 2016 в 10:33
  • Возможно решение с display:table у родителя и display:table-row у детей, будете рассматривать такой вариант?
    – dakiesse
    19 мар 2016 в 12:40
0

html {
  height: 100%;
}

body {
  position: relative;
  min-height: 100%;
}

main {
  padding-bottom: 30px;
}

footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
}
<body>
  <header>
   header
  </header>
  <main>
   data
  </main>
  <footer>
   footer
  </footer>
</body>

4
  • 1
    Можете сделать ваш код запускаемым? 1 янв 2017 в 16:04
  • @VadimOvchinnikov, сейчас убегаю. Пример работы данного решения можете увидеть на mobidevices.ru 1 янв 2017 в 16:06
  • @VadimOvchinnikov зачем вы добавили неправильную разметку к моему решению? 1 янв 2017 в 16:12
  • Взял ту, которая с ответа. А если у вас другая разметка почему вы её не указали? 1 янв 2017 в 16:14
0

Если я правильно понял вопрос, то вот мой ответ, если же ето не то, то отпишите и я удалю ответ.

<div class="wrapper">
  <header></header>
  <section></section>
  <footer></footer>
</div>  

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

.wrapper {
  position: relative;
  min-height: 100%;
}

header {
  height: 50px;
  background: red;
}

section {
  padding-bottom: 100px;
  background: yellow;
}

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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