CODEWITHSUNDEEP
htmliframestylesheight
Henrik Petterson
Henrik Petterson

Reputation: 7094

iframe height set to 100% without any result - using Firefox v14

I am working on a code currently where I have set the height of my iframe to 100% but it does not seem to work at all. I have tried to strip unnecessary code from it to demonstrate the issue, view the code here (mind the inline css): http://jsfiddle.net/VfKqR/

And here it is:

<!-- Start full page container -->
<div style="min-width: 830px; width: 100%; height: 100%; float: left;">

<!-- Start scoop menu -->
<div style="width: 188px; float: left;">

<table>
    <thead>
    <tr>
        <td>

<a href="http://rambler.ru" target="scoop" style="font-size:13px; letter-spacing: 0.7px; font-weight: bold;">Link tester</a>

        </td>
    </tr>
    </thead>
</table>

<!-- End scoop menu -->
</div>

<!-- spacer between divs -->
<div style="width: 20px; float: left;">&nbsp;</div>

<!-- Start iframe -->
<div style="min-width: 622px; width:74%; height: 100%; float: left;">

<iframe id="scoop" name="scoop" src="http://www.yahoo.com" style="border:0px #FFFFFF none;" name="myiframe" scrolling="yes" frameborder="0" marginheight="0px" marginwidth="0px" width="100%" height="100%">

<!-- End iframe -->
</div>

<!-- End full page container -->
</div>

Nothing that I can do seem to fix the height to 100%. What am I missing here?

EDIT: I just tested this in Safari and it worked fine, however in the latest version of Firefox (v14.0.1), it does not work.

Upvotes: 0

Views: 2689

Answers (3)

Hazard in Code
Hazard in Code

Reputation: 169

Checkout my solution Setting iframe to take remaining space in page without any JS.

You will need to clear some float's most likely (as those are the reason the iFrame will not scale) and most likely you will need to refactor your code a bit.

Hope that helps.

Upvotes: 0

orhanhenrik
orhanhenrik

Reputation: 1415

UPDATED FOR JAVASCRIPT

javascript:

<script type="text/javascript">
var sheet = document.createElement('style')
sheet.innerHTML = "html, body{height: 100%;}";
document.head.appendChild(sheet);
</script>

html:

<div style="min-width: 622px; width:74%; height: 100%; float: left;">​......

Upvotes: 0

Cyber
Cyber

Reputation: 382

You could use this small jquery script I've just wrote to achieve it:

jQuery(document).ready(function(){var height = $(window).height();
            $('iframe').css('height', height)
        });

http://jsfiddle.net/VurLy/

Upvotes: 2

Related Questions