Можно ли сделать iframe действительно отзывчивым, используя HTML и CSS?

Question

У меня есть простой код для iframe. Я хочу, чтобы веб-страница отображалась без проблем, т. Е. Полоса прокрутки отсутствует

Я пробовал скрытое переполнение, но, похоже, не могу понять, как оно правильно

HTML

 <iframe name="Framename"     src="https://website"
 width="100%" height="100%" frameborder="0" scrolling="auto" 
 class="frame- 
 area">
 </iframe>

CSS

.frame-area {
  display: block;
  width: 100%;  /* RESPONSIVE WIDTH */
  max-width: 100%;
  height: 100%;
  overflow: hidden;  /* EDIT TO hidden FOR NO SCROLLBAR */
  border: #999999 1px solid;
  margin: 0px;
  padding: 0px;
  }

Результаты, которые я имею, представляют собой страницу шириной всего лишь с небольшим количеством высоты

Я хочу, чтобы он отображал полную ширину и высоту и был полностью отзывчивым

Answer 1

Чтобы ваш iframe соответствовал полной высоте и ширине страницы, используйте этот тег css и iframe.

[РЕДАКТИРОВАТЬ] Из-за вашего комментария, что я редактировал нижний колонтитул, чтобы он работал с нижним колонтитулом.Нижний колонтитул исчез, потому что iframe был на 100% высотой и оттолкнул его внизу, что привело к появлению полосы прокрутки.См. Ниже исправление.

В приведенном ниже примере кода обратите внимание, что CSS для нижнего колонтитула показывает высоту 30 пикселей.Таким образом, iframe должен быть на 30px меньше высоты экрана, чтобы обеспечить пространство для нижнего колонтитула.Это можно сделать, используя высоту: calc (100% - 30px);Конечно, замените фактическую высоту вашего нижнего колонтитула на 30 пикселей.

body {
    margin:0;
    padding:0;
}

.frame-area {
    position:absolute;
    height:calc(100% - 30px); /* example below if your footer is 30px in height */
    width:100%;
    border:none;
}

footer {
    position:absolute;
    bottom:0;
    height:30px; /* match this height in your iframe width calc value */
}

И с помощью CSS выше вы можете упростить форматирование тега iframe:

<iframe name="Framename" src="https://website" class="frame-area"</iframe>
<footer>This is the footer</footer>