Div перекрывается при изменении размера по вертикали

#html #css

#HTML #css

Вопрос:

При попытке изменить размер моей веб-страницы по горизонтали все работает нормально. Когда я пытаюсь изменить размер страницы по вертикали, разделы начинают перекрываться, и вся веб-страница выглядит странно. Что я мог бы попытаться исправить это?

     .container-1-wrapper
    {
      width:100vw;
      height:100vh;
      background: #3399FF;
    
    }
    .container-2-wrapper
    {
      width:100vw;
      height:100vh;
      background:   #f9f9eb;
    }

 <div class="container-1-wrapper"></div>
<div class="container-2-wrapper"></div>

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

2. Как это странно перекрывается? … Добавьте больше информации о том, что он делает и как он должен, поскольку в его нынешнем состоянии очень неясно, что вы имеете в виду.

Ответ №1:

Я бы рекомендовал добавить это в ваш стиль в этом разделе:

 .container-1-wrapper
{
  width:100vw;
  height:100vh;
  background: #3399FF;
  position: relative;
  display: block;
  clear: both;
}

Это приведет ваш код в формат блока, соответствующий окружающему его содержимому, а также очистит любой текст / элементы с обеих сторон страницы. Я настоятельно рекомендую это, если вы можете (или способны) переместить свои элементы в одну сторону. Если вы закодируете float в свои элементы, это предотвратит столкновение ваших divs-файлов друг с другом. Это должно очистить обе стороны элемента div.

Кроме того, если вы пытаетесь изменить размер своей страницы для форматирования на другое устройство, возможно, этот фрагмент кода поможет вам:

 <meta name="viewport" content="width=device-width, initial-scale=1">

Поместите это в начале вашего CSS прямо под объявлением типа шрифта и тому подобного (в разделе для метаданных). Это должно сделать вашу страницу такой, чтобы она всегда масштабировалась вверх и вниз в соответствии с размером вашего окна.

1. Спасибо за помощь

2. Не уверен, как этот ответ получил 2 голоса вверх, поскольку он ничего не делает с примером кода OP. Например, display: block это значение по умолчанию для div , так что то, что вы имеете в виду, говоря, что это делает «формат блока, который относится к окружению» , не имеет смысла.

Ответ №2:

Из-за небольшого количества информации вы можете только догадываться:

Попробуйте применить position: relative и display: block к оболочке