Content Width & Height 100% [Solved]

This might look like a very easy solution for almost all Web Developers. It did to me too until I had an issue where I had to use iFrames (Yes, iFrames. Yes, I know its 2013) and I couldn’t get it to stretch 100% on the screen. I searched around for 2 days on the internet and found a lot of solutions. Unfortunately, none of them worked! So, if you have the same issue as I did and are looking for solution, trust me, use the solution that I have. It is guaranteed to work in all modern browsers (Yes, IE, too). Here, is the magic solution:

1. Include the following JavaScript between your and tags.

1
2
3
4
5
6
7
<script type="text/javascript">
    var getHeight = window.innerHeight;
    var getHeightPx = scHeight + "px";
    document.write("<iframe src='http://www.example.com' width='100%' height='" + scHeight + "' frameborder='0' />");
</script>

2. Add this into your CSS file:

1
2
3
4
5
6
7
8
html, body {
    height:100%;
}
iframe {
    height:auto;
    min-height:100%;
}

That’s it! You might have 99 problems but I hope “resizing iFrames to 100%” ain’t one.

This entry was posted in Technology and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>