Как я могу заставить свой iframe застрять между фиксированным верхним и нижним колонтитулом с помощью css? - PullRequest
Новая
       23

Как я могу заставить свой iframe застрять между фиксированным верхним и нижним колонтитулом с помощью css?

0 голосов
/ 07 ноября 2018

У меня есть экран с и iframe и верхний и нижний колонтитулы. Я хочу, чтобы он был значительным, чтобы он работал на каждом экране. Это мой HTML и CSS:

HTML: 

<header class="topbar">
    <h2>Header</h2>
</header>

<section>
<iframe name="main" class="frame" src="login.php" scrolling="yes" frameborder="0">

</iframe>
</section>

<footer class="botbar">
       <h2>Footer</h2>
</footer>

CSS: 

iframe:focus { 
outline: none;
}

iframe[seamless] { 
display: block;
}

.topbar { 
background-color: dodgerblue;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 10;
height: 74px;
text-align: center;
}

.botbar { 
position: fixed;
bottom: 0;
left: 0;
right: 0;
background-color: coral;
height: 74px;
text-align: center;
}

.frame {
position: fixed;
width: 100%;
height: 80%; 
float: inherit;
margin-top: 74px;
}

Когда я запускаю код, я получаю хорошо работающий макет, но когда я уменьшаю размер экрана, нижняя часть iframe исчезает под моим нижним колонтитулом. Это потому, что мой нижний колонтитул остается прежним, но мой iframe меняет размер. Есть ли способ сделать нижний колонтитул похожим на нижнюю часть страницы?

1 Ответ

0 голосов
/ 07 ноября 2018

Вы можете использовать calc для установки высоты iframe на 100% и удаления из нее двух 74px (высоты верхнего и нижнего колонтитула), например: 

.frame {
    position: fixed;
    width: 100%;
    height: calc(100% - 74px - 74px);
    float: inherit;
    margin-top: 74px;
    top: 0;
}
...