please bear with my terrible coding (I am still learning) I am creating a wordpress webpage for my boss that is simply a header.php index.php and footer.php
The content in index.php is just an iframe which I want to sit behind the header.php and the footer.php. Although when I apply a position:fixed; to my iframe (so that it fills the webpage) my footer jumps up and covers my header.php.
I am struggling to find a way I can have a 100% sized iframe (no scroll) as well as a footer menu that stays down the bottom of my page
thanks in advance :)
body, html {
margin: 0;
padding: 0;
}
#container {
display: inline-block;
}
header {
top: 0;
z-index: 1;
position: absolute;
background: rgba(255, 255, 255, 0.5);
overflow: hidden;
width: 100%;
height: 100px;
}
.bmenu li{
display: inline-block;
}
#menu1 ul{
float: left;
}
#menu2 {
float: right;
padding-right: 5%;
}
#logo img{
margin-left: 15%;
width: 300px;
max-width: 100%;
}
.cmenu li{
display: inline;
padding: 20px 50px;
max-width: 100%;
}
#navigation3 ul{
margin-left:40%;
margin-bottom: 10px;
max-width: 100%;
z-index: 1;
position: fixed;
}
iframe {
z-index: 0;
width: 100%;
height: 100%;
overflow: hidden;
position: fixed;
}<body>
<div id="container">
<header>
<div id="menu1">
<nav id="navigation1">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu itemm</li>
</ul>
</nav>
</div>
<div id="menu2">
<nav id="navigation2">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu itemm</li>
</ul>
</nav>
</div>
<div id="logo">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="logo">
</div>
</header>
<article>
<iframe name="background" scrolling="no" src="https://www.bing.com.au" frameborder="0">
<p>Your browser does not support iframes.</p>
</iframe>
</article>
<div id="footer">
<nav id="navigation3">
<ul>
<li>menu item</li>
<li>menu item</li>
<li>menu itemm</li>
</ul>
</nav>
</div>
<?php wp_footer(); ?>
</div>
</body></div>
