Как использовать vh и vw CSS для одной страницы без прокрутки веб-страниц?
У меня есть веб-страница, на которой я пытаюсь не прокручивать, а заполнять любое представление пользователя рекламой слева и в конце и картой Google, заполняющей большую часть страницы. На данный момент My CSS для карты и рекламного блока выглядит так:
.side-col{
width: 25%;
float: left;
}
.map-col{
width: 75%;
float: right;
padding-left: 20px;
}
@media(max-width: 991px){
.side-col{
width: 30%;
float: left;
}
.map-col{
width: 70%;
float: right;
}
}
Я провел небольшое исследование и кое-что прочитал о vh и vw.
Но когда я изменил свой код с использования процента для ширины на использование vw и добавление vh для заполнения 100% высоты, он просто поместил мой рекламный блок странно ниже моего блока карты.
Вы можете найти весь мой файл CSS здесь на веб-странице.
Конечная цель, к которой я стремлюсь, — это рекламный баннер с левой стороны, а остальная часть пространства заполнена картой Google на рабочем столе. На мобильном телефоне небольшой рекламный баннер внизу с остальной картой Google. Прокрутки тоже нет.
Ответы 2
Сохраняйте ширину в процентах и используйте vh для высоты. Также используйте display: inline-block вместо float, гораздо лучше для макетов.
.side-col{
width: 25%;
height: 100vh;
vertical-align: top;
display: inline-block;
}
.map-col{
width: 75%;
height: 100vh;
vertical-align: top;
display: inline-block;
}если они все еще не помещаются в одну и ту же строку, то вокруг карты могут быть некоторые поля по умолчанию, которые занимают дополнительное место. Вы можете использовать функцию calc(), чтобы уменьшить ширину в % с шагом в пикселях.
Например, если вы хотите, чтобы отступ слева от 20px на карте, то:
width: calc(75% - 20px)
Спасибо за быстрый ответ. Я только что попробовал правки, и вы видите: seekadventure.net/adventureMap.html Он просто переместил добавление ниже и заставил карту двигаться влево.
глядя на этот сайт, вы все еще используете поплавки
Извините, живой сайт, все еще играю с ним между комментариями. Я оставил его, пока не закончил ужинать...
Попробуйте использовать display: grid; в родительском элементе.
.parent-element {
display: grid;
grid-template-columns: 30vw 1fr;
grid-template-rows: 100vh;
justify-items: center;
align-items: center;
}
Старайтесь использовать floats как можно меньше. Использование сетки в css поможет сделать ваш код коротким и в то же время эффективным.
Посетите https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout, чтобы узнать больше о макете сетки CSS.
встроенный блок заставляет боковую панель и карту отображаться вместе друг с другом, это довольно фундаментальный css Learnlayout.com/inline-block.html