Search code examples
htmlcssiframefooternav

How to set iframe to fill width of page?

I am wanting these following elements, embedded using iframes, to fill the width of the page. Now, is it possible to fill the widths despite using iframes, or because I'm using iframes, is that the closest to the edges the header, nav, and footer can touch?

header and nav footer From html:

       <header>
            <iframe src="header.html" frameborder="0" width="100%" height="270"></iframe>
        </header>
<div id="wrap">
            <iframe src="nav.html" frameborder="0" width="100%" height="150"></iframe>

            <iframe src="footer.html" frameborder="0" width="100%" height="100"></iframe>
        </div>

From css:

header {
    background-color: #fff;
    margin-bottom: -2%;
}
nav {
    background-color: #2c3e2c;
    overflow: auto;
}
nav a {
    color: #fff;
    font: 24px Tajawal, "Times New Roman", Arial, sans-serif;
    text-decoration: none;
    text-shadow: 2px 2px 3px #4e4337;
    text-transform: uppercase;
}

footer {
    background-color: #2c3e2c;
    color: #fff;
    font: 22px Tajawal, "Times New Roman", Arial, sans-serif;
    padding: 1% 0 1% 0;
    text-align: center;
}
Solution

  • The problem isn't actually due to your use of iframes, but rather due to the fact that browsers add an automatic 8px of margin to their pages. To correct this (allowing your elements to hit the absolute edge of the page), you'll want to set the following:

    body {
  margin: 0;
}