Div перекрывается при изменении размера по вертикали
При попытке изменить размер моей веб-страницы по горизонтали все работает нормально. Когда я пытаюсь изменить размер страницы по вертикали, элементы div начинают перекрываться, и вся веб-страница выглядит странно. Что я могу попытаться исправить?
.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>Как это странно перекрывается? ... Добавьте больше информации о том, что он делает и как должен, так как в его нынешнем состоянии очень неясно, что вы имеете в виду.
Ответы 2
С небольшой информацией вы можете только догадываться:
Попробуйте применить position: relative и display: block к обертке
Я бы рекомендовал добавить это к вашему стилю в этом разделе:
.container-1-wrapper
{
width:100vw;
height:100vh;
background: #3399FF;
position: relative;
display: block;
clear: both;
}
Это поместит ваш код в блочный формат, соответствующий окружающему его содержимому, а также очистит любой текст/элементы с обеих сторон страницы. Я настоятельно рекомендую это, если вы можете (или можете) перемещать свои элементы в одну сторону. Если вы закодируете число с плавающей запятой в свои элементы, это предотвратит столкновение ваших элементов div друг с другом. Он должен очистить обе стороны элемента div.
Кроме того, если вы пытаетесь изменить размер страницы для форматирования на другом устройстве, возможно, вам поможет этот фрагмент кода:
<meta name = "viewport" content = "width=device-width, initial-scale=1">
Поместите это в начало вашего CSS прямо под объявлением типа шрифта и т. д. (в разделе метаданных). Это должно сделать вашу страницу такой, чтобы она всегда увеличивалась и уменьшалась в зависимости от размера вашего окна.
Спасибо за помощь
Не уверен, как этот ответ получил 2 голоса, поскольку он ничего не делает с образцом кода OP. Например. display: block — это значение по умолчанию для div, поэтому то, что вы имеете в виду, говоря, что это делает "формат блока относительно окружающего", не имеет смысла.
не могли бы вы предоставить больше кода? это просто css, нам нужно больше информации, чтобы ответить на ваш вопрос