Is there a way to set the height/width CSS properties to something like that: 100% - 50px So if the total 100% is 1000px, then the end result would be 950px. And the 100% is set by the browser size.
UPDATE: What I'm trying to do is:
I have two div, the first div's height is 50px, I would like the second div's height to cover the remaining space.
There is a solution in css3, and I also actually think it has been supported in IE for sometime.
Example:
width: -moz-calc(25% - 1em);
After search though the net, I realized that it can't be done.
The only way to simulate is to adjust it with JavaScript and onresize event.
Not with width itself.
You have to set either the margins and / or the paddings left and right to a total of 50px.
If you want this for the whole page:
body { margin: 0; padding: 25px; }
That will give you a padding at the top and the bottom also. If you don't want that you can set them to zero:
body { margin: 0; padding: 0 25px; }
Note: Most browsers use a default margin for the body, but some (Opera) use a default padding instead, so you should always specify both the margin and padding for the body.
In the second div set
top=50px,
bottom=0
position=absolute
No javascript needed.
来源：https://stackoverflow.com/questions/1961200/css-width-height-pixel-and-percentage-calculation-combintaion