Search code examples
htmliframeheightfooter

Page fills window with content filling the gap

I am currently building a website at http://grapevineiow.org/m_inspireblog.html. This website has a header and footer. The page I have linked to above features a blog in an iframe. Clearly the blog is far too long to fit into the page as one continuous piece of content, so scrollbars are required.

However, this is where there is a problem. I want to keep the scrollbars on the blog (so users can scroll through it), but I want the page to fill the window exactly, so the header and footer take up the minimum space needed. The header is fine, but the footer is being a problem.

I have tried:

  • Setting the height of the body and html to 100% in CSS.
  • Setting the height of the content to 100% in CSS, but that made the content fill the window.
  • Styling the footer as height:auto 0 in CSS.

...but none of these have worked.

I would like to be able to solve this problem using just CSS if possible, but I'm open to using HTML if needed. I would like to avoid Javascript.

Thank you in advance.

Solution

  • If you know the heights of the header and footer, you can achieve this by setting both top and bottom on the middle area like this:

    <style type="text/css">
html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#header{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100px;
    background: #f09;
}
#content{
    position: absolute;
    width: 100%;
    top: 100px;
    bottom: 100px;
    background: #f90;
}
#content iframe{
    width: 100%;
    height: 100%;
}
#footer{
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: #90f;
}
</style>

<div id="header"></div>
<div id="content">
    <iframe src="http://en.wikipedia.org/wiki/Butterfly"></iframe>
</div>
<div id="footer"></div>