Css. Высота блока по вертикали!

265

15 августа 2018, 18:10

Есть 3 блока header, content, footer.

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

у header и у footer высота не фиксирована и меняется при смене расширения(то бишь адаптивный дизайн ) весь контент, что содержится в блоке content, должен стоять по вертикали- ровно.

Пробовал ставить:

#content{
height:100vh; //вылазит за пределы экрана- появляется прокрутка.
}

Как сделать высоту content от header к footer на 100% средствами css и не flex-ми, и не grid-ми?

Answer 1

Для поддержки старых версий браузеров без использования flex и grid. Высота блоков header, wrapper и footer не фиксированая.

* { 
  margin: 0; 
  padding: 0; 
} 
 
html { 
  height: 100%; 
} 
 
body { 
  position: relative; 
  min-height: 100%; 
  height: 100%; 
} 
 
.layout { 
  display: table; 
  height: 100%; 
  width: 100%; 
} 
 
.layout-header, 
.layout-wrapper, 
.layout-footer { 
  display: table-row; 
  width: 100%; 
  height: 1px; 
} 
 
.layout-wrapper { 
  height: 100%; 
} 
 
.header, 
.footer { 
  display: table-cell; 
  text-align: center; 
  height: 1px; 
} 
 
.wrapper { 
  display: table-cell; 
  vertical-align: middle; 
  width: 100%; 
  height: 100%; 
  background: grey; 
} 
 
.header { 
  background: yellow; 
  padding: 10px 20px; 
} 
 
.footer { 
  width: 100%; 
  padding: 10px 0; 
  background: green; 
}

<head> 
  <meta charset=utf-8 /> 
  <title></title> 
</head> 
 
<body> 
  <div class="layout"> 
    <div class="layout-header"> 
      <div class="header"> 
        Lorem ipsum dolor sit amet, primis quodsi qui ea, ea mea sint consulatu dissentias, ludus altera suavitate pri id. Legimus facilis no has, quod elitr aliquam cu nec. Eam affert invenire similique at, eu eam lucilius pertinacia instructior. Ad nam falli 
        ignota insolens. 
      </div> 
    </div> 
    <div class="layout-wrapper"> 
      <div class="wrapper"></div> 
    </div> 
    <div class="layout-footer"> 
      <div class="footer"> 
        2012 - 2018. All rights reserved. 
      </div> 
    </div> 
</body>