Как растянуть iframe на весь экран
Перейти к содержимому

Как растянуть iframe на весь экран

  • автор:

iframe во весь экран относительно других iframe

Здравствуйте!
Раньше я задавал iframe ширину(width) и высоту(height). Но получалось так что на разных мониторах появлялись скролы или iframe не занимал все пространство. У меня в коде идут 4-ре вниз друг за другом iframe с графиками внутри. Подскажите как сделать так чтобы iframe на разных мониторах растягивались полностью по ширине экрана без скрола, и по высоте следуя друг за другом 4-ре фрэйма?

Вот пока что есть:
Экспериментируя они сейчас превращаются в 4-ре маленькие окошки слева экрана со скроломи вниз и в верх.

1 2 3 4
iframe allow="fullscreen" style="border: 1px solid #383838" src = '.$idteamh1.'>/iframe>br> iframe allow="fullscreen" style="border: 1px solid #383838" src = '.$idteama1.'>/iframe>br> iframe allow="fullscreen" style="border: 1px solid #383838" src = '.$idteamh2.'>/iframe>br> iframe allow="fullscreen" style="border: 1px solid #383838" src = '.$idteama2.'>/iframe>

Добавлено через 25 минут
Может есть в HTML другие инструменты как это сделать?

Как растянуть iframe на всю высоту?

Ankhena

Он у вас и так на всю высоту родителя
https://jsfiddle.net/ub0ch95g/
Не умеете пользоваться инструментами разработчика, так хоть по-старинке, рамочками обводите блоки.

Antonio09 @Antonio09 Автор вопроса
Ankhena, я имел ввиду на всю высоту итема
Antonio09 @Antonio09 Автор вопроса
Ankhena, вот задаю 100% — вылазит за блок —
https://jsfiddle.net/cuenhtLa/

Ankhena

Ankhena @Ankhena Куратор тега CSS
Antonio09, естественно, потому что 100% это высота родителя. Но в родителе есть еще заголовок.
Решения вопроса 1

Вы можете контейнер `contacts__item` сделать флекс контейнером, и потом `contacts__map` задать
flex-grow: 1;
В таком случае блок с картой у вас будет растягиваться, но у вас у родительского контейнера есть вн. паддинги 30px, если вы хотите, чтобы карта занимала всю ширину до границы, то уберите нижний паддинг

iframe во всю высоту окна браузера

С помощью CSS невозможно задать высоту iframe 100%, поэтому высота его фиксированная (с полосами прокрутки по вертикали). Для растяжения содержимого ифрейма во всю высоту без полос прокрутки существует простое решение с использованием jQuery. А как это осуществить без использования фреймворков?

Отслеживать

задан 6 фев 2013 в 14:21

1,664 5 5 золотых знаков 30 30 серебряных знаков 68 68 бронзовых знаков

А с чего это Вы взяли что невозможно задать iframe width и height в 100% ?

6 фев 2013 в 15:23

Потому что я уже пробовал. src фрейма динамически генегигуется яваскриптом, допустим src=’text.html'(да и просто если text.txt’. При этом высота фрейма устанавливается по умолчанию, где-то 150px. width=100% на него действует, а вот height — нет. Только если задать конкретную высоту в пикселях все работает. Однако содержимое фрейма всегда будет различным, поэтому его высота заранее неизвестна. Во как.

Как растянуть на весь экран телефона видео с ютуб?

Всем привет. Ребят, подскажите как сделать так, чтобы размещая видео с ютуба на сайте, оно корректно растягивалось во весь экран на смартфонах. Сейчас стандартный html код выходит за видимую область телефона.

  • Яндекс кобласит
  • Подскажите по вставке кода видео с Дзен на сайт
  • Спрашиваем и отвечаем по WordPress-15

На сайте с 03.09.2009
13 февраля 2018, 12:11

HeyMan:
Всем привет. Ребят, подскажите как сделать так, чтобы размещая видео с ютуба на сайте, оно корректно растягивалось во весь экран на смартфонах. Сейчас стандартный html код выходит за видимую область телефона.




На сайте с 23.01.2012
13 февраля 2018, 14:33

ziliboba0213, В горизонтальном положении телефона, видео не вписывается, уходит за пределы экрана.

На сайте с 03.09.2009
13 февраля 2018, 15:21

HeyMan:
ziliboba0213, В горизонтальном положении телефона, видео не вписывается, уходит за пределы экрана.

По высоте что-ли? Добавляйте тогда height нужный в стили.

Как ширину от высоты делать писать не буду, лень ��

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *