0

I have a screen with and iframe and a header and a footer. I want to make it sizable, so it works on every screen. This is my html and 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;
}

When I run the code, I get a goodworking layout, but when I make my screen smaller, the bottom of the iframe disappears beneath my footer. This is because my footer stays the same, but my iframe changes size. Is there a way to make the footer seem like the bottom of the page?

fsdfsd
  • 1

1 Answers1

0

You may use calc to set iframe height to 100% and remove two 74px (Header and footer height) from it, like this:

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