Высота iFrame на основе фиксированного нижнего колонтитула с фоновым покрытием

Question

У меня есть некоторый контент в iFrame и нижнем колонтитуле, который я хочу исправить, но я хочу, чтобы размер нижнего колонтитула изменялся в зависимости от размера экрана пользователя, и я хочу, чтобы нижний колонтитул заполнил рисунок нижнего колонтитула.Нижний колонтитул имеет фоновое изображение, которое использует background-size: cover.Поэтому, когда у пользователя широкий экран, нижний колонтитул должен быть шириной экрана, а высота должна поддерживать соотношение сторон фонового изображения.

Мой HTML выглядит так:

<div id="content">
  <iframe id="xyz">
  </iframe>
</div>
<div id="footer">
  <div id="innerFooter">
  </div>
</div>

Мой CSS выглядит следующим образом:

#content {
    top: 0px;
    left: 0;
    position: relative;
    border: 1px solid #6AA3D4;
    width: 100%;
    height: 100%;
}

iframe {
    width: 100%;
    height: 100%;
}

#footer {
    width: 100%;
    height: 100%;
    background-color: #fff;
    bottom: 0;
    position: absolute;
    width: 100vw;
}
.innerFooter {

    background: url("images/footerMain.png");

    height: 100%;
    width: 100%;
    background-size: cover;
    position: relative;
    display: inline-block;
}

Я хочу, чтобы мой нижний колонтитул находился внизу страницы и соответствующим образом изменял размеры (высоту / ширину), чтобы он полностью соответствовал фоновой графике.Я также хочу, чтобы моим основным содержимым (iframe) была полная высота страницы до верха нижнего колонтитула.

Прямо сейчас мой iframe не является полной высотой страницы.

Answer 1

вместо position:absolute для нижнего колонтитула используйте position:fixed, а высота должна быть в пикселях для нижнего колонтитула, а не в%.

#footer {
    width: 100%;
    height: 60px; /*changed percent to pixel*/
    background-color: #fff;
    bottom: 0;
    position: fixed; /*changed absolute to fixed*/
    width: 100vw;
}

подробнее о позиционировании CSS: Здесь