Динамическое изменения размера блоков

Question

Есть несколько блоков - хедер, футер и два блока в центре с графиками (highcharts) Рыжие блоки - фиксированны по высоте, а зеленые(1,2) собственно нужно изменять по высоте

Подскажите, как через css сделать, чтобы они занимали все свободное пространство (в идеале второй блок должен быть чуть больше 40 к 60) не создавая скролл. Пытался задавать vh, в полноэкранном режиме скрола нет, если окно уменьшить не в ноль а до обычного не полноэкранного размера, то скролы появляются

Answer 1

Решение на grid-template Хорошо тем, что даёт создать всю сетку страницы, не только какие-то отдельные столбы/строчки, и пишется простым синтаксисом

.body-div {
  min-height: 98vh;
  height: 98vh;
  max-height: 98vh;
  margin: auto;
  overflow-y: hidden;
  display: grid;
  grid-template:
    "header" 50px
    "graph1" calc(49vh-50px)
    "graph2" calc(49vh-50px)
    "footer" 50px
  98vw;
}
// не забудьте про указание названий полей гридов
.header {
grid-area: header
}

В решении оставлено 2vh на поля сверху и снизу, но вы можете поменять на 100vh (чтобы они занимали все свободное пространство) на свой страх и риск :) В гридах соответственно меняйте расчёт на calc(50vh-50px).

Answer 2

Можно вот так попробовать обернув блоки предварительно размеры обертки у меня такие чисто что б было наглядно их можно вообще не указывать и тогда все будет тянуться согласно контенту

.wrap {
    display: flex;
    flex-direction: column;
    background-color: rgb(240, 133, 133);
    height: 200vh;
    width: 100wv;
}

.aa {
    width: 100%;
    min-height: 40%;
    background-color: rgb(7, 7, 7);
}

.bb {
    width: 100%;
    min-height: 60%;
    background-color: rgb(63, 221, 111);
}

Answer 3

*{
margin: 0;
padding: 0;
text-align: center;

}
body{
height: 100vh;
}
header, footer{
height: 50px;
background: yellow;
}
.section1{
height: calc((100vh - 100px) * 0.6);
background: blue;
}
.section2{
height: calc((100vh - 100px) * 0.4);
background: green;
}

<body>
<header>HEADER</header>
<section class = 'section1'>section 1</section>
<section class = 'section2'>section 2</section>
<footer>FOOTER</footer>
</body>

БЛОГ НА HUSL

Динамическое изменения размера блоков

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