Откуда же взялся скролл?

Question

Всем привет! Я установил абсолютные значения для основных блоков, но прокрутка все равно не исчезает.

Почему погрешность 9px?

Почему, когда я удаляю свойство блока blue justify-content: space-between; или добавляю padding-bottom: 9px; для блока red прокрутка исчезает?

https://jsfiddle.net/81u0jxqr/

Answer 1

Не согласен. Во первых, если убрать у класса blue свойство justify-content: space-between;, то скролл по прежнему будет, просто он будет меньше. А вот если убрать height: 100% , для .blue, тогда скролл действительно пропадет. И наконец решение с вопросом. Зачем вам межстрочный интервал в 180px? Уберите его, и все станет как вы и ожидали.

Рабочий код -

    *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    height: 60px;
    background: palevioletred;
    border-top: yellow 1px solid;
}
section{
    height: calc(100vh - 60px);
}
.orange{
    background: darkorange;
    height: 100%;
}
.blue{
    background: steelblue;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.golden{
    background: palegoldenrod;
}
.red{
    background: indianred;
    font-size: 180px;
    /* line-height: 180px; */
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
<header></header>
<section>
    <div class="orange">
        <div class="blue">
            <div class="golden">What's</div>
            <div class="red">wron</div>
        </div>
    </div>
</section>
</body>
</html>

PS: пожалуйста, задавайте вопрос более точно, прикладывайте код.

БЛОГ НА HUSL

Откуда же взялся скролл?

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