CODEWITHSUNDEEP
csshtmliframe
DaRussian
DaRussian

Reputation: 173

100% height for page with div, iframe, footer

I'm stuck with the problem and hoping someone can offer a solution. I found a similar post but no resolution on SO. Below is a small sample of my markup 

<div id="wrapper">
  <div id="content">
    Some text goes here
    <iframe src="http://www.reddit.com" height="100%" width="100%" />
  </div>
  <div id="footer"> footer text</div>
</div>

Look at the example in the fiddle: http://jsfiddle.net/SaYAw/36/

What I'm trying to achieve is for a wrapper div to consume 100% of the page leaving no whitespace below. The wrapper div would accommodate both "content" and the iframe adjusting the height of the iframe automatically as the screen/browser window size changes. This seems like a pretty simple task, but I can't find a way to make it work. Does anyone else have an idea of what I might be missing? Looking for preferably a pure CSS solution.

Upvotes: 1

Views: 1826

Answers (2)

Moe
Moe

Reputation: 325

please make sure not to mix between classes and ID

The class is to start with a dot '.' like you have in your CSS file

but in your HTML, you don't have a class set and is an ID. So you need to change your CSS to '#' instead

html, body
{
    height:100%;
    min-height:100%;
}
#wrapper
{
    border: 1px dotted #000;
    margin:5px;
    height:100%;
    min-height:100%;
}
#content
{
    border:1px solid #ccc;
    margin:5px;
    padding:5px;
    height:100%;
    min-height:100%;
}
#ifrContent
{
    height:100%;
    min-height:100%;
    overflow:scroll;
}

hope this is what you were looking for

Upvotes: 1

Andrew Manson
Andrew Manson

Reputation: 280

You didn't close your iframe. 

<iframe src="http://www.reddit.com"
height="100%" width="100%"></iframe>

Upvotes: 0

Related Questions