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

#html #css

#HTML #css

Вопрос:

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

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

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

 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>

1. Можете ли вы добавить немного html, чтобы сделать его рабочим фрагментом актуальной проблемы, с которой вы столкнулись? Таким образом, мы можем помочь вам лучше.

2. @ElusiveCoder я добавил html, спасибо.

3. @Flexi Изменить <section="introd"> на <section class="introd"> . Нет атрибута class.

4. Я не могу увидеть ни одного перекрывающегося раздела..

5. Я попробовал ваш пример. Перекрытия не произошло

Ответ №1:

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

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

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