Question

I am looking to create a popup box, which I’ve done by way of a fixed div positioned 5% in.

I want it to fill the entire viewable window with the 5% border around the edge.

Currently (I’ve only viewed in Chrome), I can achieve the layout I want, but there is no gap at the bottom because if the body of text div has a height, it adds on the height of the header.

I’ve tried all sorts, from adding it into another containing div and plonking height: 100% all over the show, to no avail.

http://jsfiddle.net/VukSZ/

Answer 1

Depending on the targeted browser support, you can use the CSS calc() function. Just set the height of your #popup_body to calc(100% - 40px); (you’ll have to include multiple versions with different vendor-specific prefixes).

Here’s a modified version of your demo: little link.

If you need to support older browsers, you have to use JavaScript.