calculating div height

Hello,

I'm having a problem sizing a div properly.

I've got 3 divs on the page: a header, a body, and a footer. I'm positioning and sizing them as follows:

<div id="header" style="height: 75px; width: 100%;">
header
</div>
<div id="body" style="height: calc(100vh - 105px); width: 100%;">
body
</div>
<div id="footer" style="position: absolute; bottom: 0; height: 30px; width: 100%;">
footer
</div>

This seems to work: I get a header at the top 75px high, I get a footer at the bottom 30px high, and I get the body div in the middle which takes up the remaining height by calculating 100vh minus the sum of the header and footer heights.

The problem is when I resize the browser. The header stays at the top at 75px, the footer stays at the bottom at 30px, but the body div keeps its original height, effectively cropping some of its content now that the browser is smaller. I figure the problem is that when I subtract 105px from 100vh, the result of that calculation is in pixels. Being in pixels, it will not adjust the height when the browser resizes.

So what I'm wondering is: is there a way of calculating the remaining height (after header and footer heights have been set) in percentage?

I know I can handle this in javascript, but I'd really like to practice my CSS skills. Any help will be much appreciated.

If I'm understanding correctly, I don't think pixels are the issue - the content is cropped because you've set an explicit height. I think you mean "min-height" instead. Either that or continue to use "height" but additionally set overflow-y:auto; to make the box scrollable. Also , shouldn't the footer position be fixed instead of absolute?

Or are you trying to make a sticky footer? https://www.google.co.uk/search?q=sticky+footer+css

It's hard to understand without seeing your page in person, so if you need further help, please post a link. Please also clarify what you are trying to achieve.

Unfortunately, I can't post a link to the website as it is running on a private network.

I'd prefer not to have scrolling. I'd like for the entire contents of the body div to be visible on the screen all at once.

So if the problem is not pixels, then why is the body div not adjusting its height when I resize the browser? When I set a div's height explicitly to a percent value (say 50%), it adjusts with the browser size. So when the page loads in the browser, the div takes up 50% of the height. If I shrink the browser down, it still takes 50% of the height (which is now a smaller value in terms of pixels).

Essentially, I need a way to:

1) Figure out the height of the viewport that remains after subtracting the height of the header and footer.
2) Make sure the body div adjusts its height when that remaining height changes due to browser resizing.

I suppose I could use fixed for the footer position, but I'm trying to stay away from scrolling so absolute positioning will do (and seems to work with browser resizing).

Thanks again for the help.

I guess I don't understand what you're trying to do. If you've established that a percentage height does what you want, why not use 100% instead of 100vh? (Remember that parent containers need 100% height declaring too - body and html in this case.) Can you put up a demo page elsewhere to demonstrate what you described about content 'cropping'?