Search code examples
htmlcssiframesticky-footer

iframe doesn't work with stick footer

Here is my fiddle: http://jsfiddle.net/aKkFR/

I followed the steps to sticky footer here: http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/

So far, so good. However, when I add an iframe in my #content div, the footer disappears. Any idea as to why this happens and can this be fixed?

Solution

  • HTML5 doesn't support self-closing tags, you need to use </iframe>. Working demo

    What's happening: anything past that <iframe> tag is being considered as "fallback content" for browsers that don't support iframes. The same way you do it with video:

    <video src=video.mp4> Your browser doesn't support videos. </video>