0

I'm trying to make one div with height 100% - 130px;

Code is:

height: calc(100% - 130px); // Here 80px of TOC-header and 50 of TOC-footer
height: -moz-calc(100% - 130px);
height: -webkit-calc(100% - 130px);

When I edit it with browser console(Inspect Element) it works well. But when I apply the same in code it shows calc(-30%); And due to that the contents get no visibility.

I've attached a screenshot below of firebug. Really confusing moment.

Any help will be appreciated. Thanks.

enter image description here

Jay
  • 405
  • 1
  • 3
  • 12
  • A demo would be useful but it might be that the parent doesn't have a declared height. – Paulie_D Aug 29 '14 at 15:17
  • Sorry for webkit. I've updated it. And adding demo soon. – Jay Aug 29 '14 at 15:21
  • 4
    The unprefixed property should come last: it's always the last one supported by a browser with the newest way of declaring it and prefixed versions can be seen as fallback (for example flexbox and gradients evolved twice so 3 versions at least, sigh) – FelipeAls Aug 29 '14 at 15:28
  • Please check problem demo here. http://jsfiddle.net/enworl/bqgj0rsy/ – Jay Aug 29 '14 at 16:08
  • 1
    Did you want something like http://jsfiddle.net/bqgj0rsy/2/ ? – Ilya Streltsyn Aug 29 '14 at 18:19
  • Yep. It's working fine here in the fiddle. But the same code not working in my repo. – Jay Aug 29 '14 at 18:47

2 Answers2

0

Saying height: 100% refers to the same height of it's parents height.

In your case, .element1 has a height of 100% which is not recognizable. Set a real height to this element and you will see the expected output.

For example:

.element1 {
    height :200px;
}

DEMO

aniskhan001
  • 7,981
  • 8
  • 36
  • 57
0

Wrap your item in another div, give it 100% height with a padding top or bottom of 130px or padding bottom and top of 65px. This way you can even position your element vertically.

sroy
  • 811
  • 7
  • 9
  • You are right, my bad. I had this [similar problem](http://stackoverflow.com/questions/13274599/sass-calculate-percent-minus-px) the other time and somehow I remembered that this was the problem. I still believe it is best to wrap the element for better control and older browsers. – sroy Aug 29 '14 at 20:07