Calculate value with CSS3

Is there any way to achieve this in CSS3?:

开发者_开发知识库

height: 100% -110px;

My context:

---

You can't calulate it with pure CSS. (it will not work in all browsers, as mentioned by Litek ) But there is a organizational way to handle this, but you will need to wrap you element in a other one:

body {
  height; 100%;
  padding: 0 0 20px;
}

div#wrap {
  background: #fff;
  height: 100%;
  padding: 0 0 20px;
  margin: 0 0 -20px;
}

div#wrap div { //this would be your actual element
  height: 100%;
  background: pink;
}

---

What you want to use is calc() that is comming to FF and propably webkit, but don't count on it being widely supported anytime soon.

As for your example, maybe sticky footer will be some inspiration for you.

---

Edit

Nowadays it's well supported by major browsers:

http://caniuse.com/calc

---

Directly like that i'm not aware of any feature widely adopted to do that.

But there is a easy method to achieve the effect.

Put all element inside a container <div> with 'height: 100%', this container should have position relative so you can position the other elements inside it relative to its position. place the header on top and the footer at bottom with absolute positioning and calculate with javascript the height that the content div must have.

You can also subscribe the 'window.onResize' event to recalculate when the window is resized.

I know this is not a clean and prety solution, but is the one the you can make work well in almost any browser.

---

In the context it was given the 2nd div height value doesn't really matter. Actually it's only important where that div starts and where it ends.

In other words height = vertical end - vertical start:

#div2 {
    position:absolute;
    top:90px;/*20+50+20*/
    bottom:20px;
}

http://jsfiddle.net/cGwrw/3/