1

Есть определенная высота экрана, есть шапка (высота шапки не известна). Блок который идет после шапки должен быть (100vh - высота header'a)

* {
  margin: 0;
}

header {
  
  height: 100px;
  background-color: red;

}

.block {
  height: 100vh;
  background-color: blue;
}
<header>asd</header>
<div class="block">asd</div>

Можно ли такое сделать на чистом CSS, либо нужно в любом случаи прибегать к использованию JavaScript?

1
  • css не умеет это ... по любому elem.height делать на js/jquery
    – user33274
    18 июн 2018 в 13:18

1 ответ 1

2

Если высота шапки известна - можно воспользоваться css calc()

header{
  background-color:#cda;
  height:100px;
}
body{
  margin:0;
}
.block{
  background-color:#acd;
  height:calc(100vh - 100px);
}
<header></header>
<div class="block"></div>
Если высота шапки неизвестна

body{
  margin:0;
  display:flex;
  flex-direction:column;
  height:100vh;
}
header{
  padding:5px 15px;
  text-align:center;
  background-color:#dac;
  flex:0 0 auto;
}

.block{
  background-color:#acd;
  flex:1 1 auto;
}
<header>asda sdas das dasd asd sada</header>
<div class="block"></div>

Ваш ответ

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

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