Мне нужно подогнать iframe в высоту экрана. Очевидно, что я хотел 100% по ширине, но, поскольку это не работает, я использовал 100vh. Но vh, как vw, не точно 100%. В моем ноутбуке через хром, в то время как 100% -ная ширина становится совершенно без необходимости горизонтальной полосы прокрутки, vw имеет примерно на сантиметр.
vw и vh означают ширину окна просмотра и высоту видового экрана соответственно.
Разница между использованием width: 100vw вместо width: 100% заключается в том, что пока 100% сделает элемент подходящим для всего доступного пространства, ширина видового экрана имеет конкретную меру, в этом случае ширину доступного экрана, , включая поле документа.
Если вы установите стиль body { margin: 0 }, 100vw должен вести себя так же, как 100%.
Ответ Havengard, похоже, не соответствует действительности. Я обнаружил, что vw заполняет ширину окна просмотра, но не учитывает полосы прокрутки. Итак, если ваш контент выше, чем область просмотра (так что ваш сайт имеет вертикальную полосу прокрутки), то использование vw приводит к небольшой горизонтальной полосе прокрутки. Мне пришлось отключить width: 100vw для width: 100%, чтобы избавиться от горизонтальной полосы прокрутки.
Используйте идентификатор для iframe:
id = "frame", так что это будет:
<iframe id="frame">
то вам нужно добавить это в свой CSS:
#frame {
width:
height:
{