Как предотвратить наложение одного раздела на другой

Question

То, что у меня есть, кажется простой проблемой, но я не могу просто обернуть голову вокруг этого. Я погуглил, но все исправления для похожих вопросов не помогли, вот почему я прошу помощи здесь.

Я создаю целевую страницу с несколькими разделами, сложенными друг на друга. Каждый раздел занимает всю высоту порта просмотра, и все, кроме одного, также занимают 100% ширины экрана.

Однако, когда я уменьшаю высоту экрана, разделы перекрывают друг друга. Я попытался установить переполнение каждого раздела скрытым, я все еще получаю то же самое поведение. Я хочу, чтобы каждая секция имела фиксированную высоту, поскольку высота браузера уменьшается, и ее не вставляют в верхнюю секцию. Ниже приведен фрагмент моего кода.

body{
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}
.introd{
    height: 100vh;
    width: 100%;
    padding: 3rem 4rem;
    overflow: hidden;
}

<section class="introd">
    <div class="introd_wrapper">
        <h2 class="text-center">Introduction</h2>
        <div class="contents">
            some contents here
        </div>
    </div>
</section>

Answer 1

Это из-за заполнения .section элементов.Чтобы избежать добавления отступа до ширины и высоты элемента, установите для его свойства box-sizing значение border-box следующим образом:

.section{
    height: 100vh;
    width: 100%;
    padding: 3rem 4rem;
    box-sizing: border-box;
}

Кроме того, вам не нужно стилизовать тело, чтобы сделатьэлементы растягиваются, потому что каждый из них уже имеет ширину и высоту.