Iframe 100% height inside body with padding

Question

I have an iframe in my HTML document and I\'m having a bit of trouble.

I also have a URL bar (fixed position element) at the top of the page that should stay with th

Answer 1

Whilst you can't say ‘height: 100% minus some pixels’ in CSS, you can make the iframe 100% high, then push its top down using padding. Then you can take advantage of the CSS3 box-sizing property to make the padding get subtracted from the height.

This:

    
    

    
    
foo

Works on IE8, Moz, Op, Saf, Chrome. You'd have to carry on using a JavaScript fallback to make the extra scrollbar disappear for browsers that don't support box-sizing though (in particular IE up to 7).