iframe not taking full height of cell in firefox

StackOverflow https://stackoverflow.com/questions/23353646

  •  11-07-2023
  •  | 
  •  

문제

http://onlinehandytools.com/blah.php?board=EDE&level=AL&subject=biology&year=2011

If you click on any of the links labeled QP/MS in Firefox/Opera the iframe won't take up the full height and only takes up about 10% of the height. Not sure why this is happening as it's working perfectly fine in Chrome.

도움이 되었습니까?

해결책

You have only given the table those iframes are sitting in height:100% – but that doesn’t mean the elements inside the table have to take that height as well.

Give the tbody, tr and td elements inside that table the same height as well.

다른 팁

It is probably due to the <doctype> you used, since iFrame are not supported with XHTML strict Doctype 1.0

In general the use of iFrames is not a good practice, it would be better to use other methods like dhtml and ajax; however there are cases (like your one) when an iFrame is necessary.

So, here there are some solutions:

  1. Use a less-restrictive DTD, like transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">, which allows the use of iFrames
  2. Use a "tricky" custom DTD, like explained in this article: http://madskristensen.net/post/use-iframes-with-xhtml-10-strict, which simply expands the standard Strict DTD with the iFrame definitions from the Transitional DTD
  3. Convert the iFrame into an Object, like explained here: http://sumitbansal.com/web-designing-tips/w3c-validation-iframe-error-with-xhtml-1-0-strict-doctype/
  4. Calculate the height of the TD using javascript, and assign it to the iFrame; something like document.getElementById('the-iframe-id').style.height = document.getElementById('the-td-id').offsetHeight + 'px';

I hope this may help.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top