IFrames and HTML5 Help

[2MuchMark]

Howdy -

I have an HTML5 Page and I need to add an iframe element with a vertical size that is 80 to 100% the VERTICAL size of the page.

Setting width=100% works, but setting height=100% does nothing.

Help!

[The Truth Hurts]

http://stackoverflow.com/a/19228136

[2MuchMark]

Originally Posted by The Truth Hurts

http://stackoverflow.com/a/19228136

Thanks! But no luck... I can set the height to any pixel size I want, but making it 100% using this method doesn't seem to work. Any other ideas?

[wizzart]

http://jsfiddle.net/3Q774/

[RummyBoy]

How is HTML5 better than the other HTML?

[afoo]

Originally Posted by RummyBoy

How is HTML5 better than the other HTML?

http://stackoverflow.com/a/577778

[Vendzilla]

Originally Posted by **********

Howdy -

I have an HTML5 Page and I need to add an iframe element with a vertical size that is 80 to 100% the VERTICAL size of the page.

Setting width=100% works, but setting height=100% does nothing.

Help!

Going to need more info on your code to fix that. Going to depend on your CSS probably.
You can always make a <div> container like

#div-wrap { position: relative; width: auto; height:300px; margin: 10px auto; padding: 10px; background: transparent;
}

in the header or css style sheet

then put in

<div id="div-wrap">...,[/div]

[2MuchMark]

Originally Posted by Vendzilla

Going to need more info on your code to fix that. Going to depend on your CSS probably.
You can always make a <div> container like

#div-wrap { position: relative; width: auto; height:300px; margin: 10px auto; padding: 10px; background: transparent;
}

in the header or css style sheet

then put in

<div id="div-wrap">...,[/div]

Thanks Vendy (really!)

But the height can't be a fixed amount, like 300px. It has to be a percentage of the total height of the page.

For example, if you take your browser window now and reduce the horizontal size, this GFY page will change to always fit within the browser. But if you do this with an iframe, the horizontal resizing works but not the vertical resizing.

Originally Posted by RummyBoy

How is HTML5 better than the other HTML?

What I am trying to do is make a page that displays a frame on a mobile device. HTML5 still supports iframes, but has limited or no support for regular frames. If I want the rest of the page to display correctly on mobile I have to use HTML5.

[2MuchMark]

Originally Posted by wizzart

http://jsfiddle.net/3Q774/

Thanks! This might do the trick!

[Vendzilla]

Originally Posted by **********

Thanks Vendy (really!)

But the height can't be a fixed amount, like 300px. It has to be a percentage of the total height of the page.

For example, if you take your browser window now and reduce the horizontal size, this GFY page will change to always fit within the browser. But if you do this with an iframe, the horizontal resizing works but not the vertical resizing.

.

Then I would have to see the whole page to figure it out, this is just a little fix that helps out a lot. And it's html5 compliant and works on mobile.

[Vendzilla]

Originally Posted by RummyBoy

How is HTML5 better than the other HTML?

Compliance with html5 standards means it works on mobile and tablets, where a lot of your traffic is going to come from.

That's why most everyone uses divs instead of tables

Great tool to make sure your code is good
http://validator.w3.org/

[wizzart]

Originally Posted by **********

Thanks! This might do the trick!

glad to help ;)