why height: calc(100% - 100px) is not working

Question

JsFiddle I am trying to set height of the test div as calc(100%-100px). why it is not working.

.test {
  height: calc(100%-100px);
 }

"Not working" is meaningless if you don't know what it is supposed to do. What are you expecting to happen? — jlars62, Oct 25 '13 at 21:42
Are you testing with a browser that supports `calc()` unprefixed? — cimmanon, Oct 25 '13 at 21:45
As a side note, you cannot have `
` as a direct child of elements ``, ``, or `` — Nick Rolando, Oct 25 '13 at 21:49
You can see answer at http://stackoverflow.com/a/16165110/426533 — Sergey, Dec 31 '13 at 09:41

score 19 · Answer 1 · edited Jun 09 '14 at 14:12

19

The operators + and - require whitespace before and after. Try calc(100% - 100px). With the * operator you don't need whitespace ex. calc(100%(1/15))

edited Jun 09 '14 at 14:12

Neeku

3,646
8
33
43

answered Jun 09 '14 at 13:49

ajSkyrocket

191
1
3

Thank you very much – Durgesh Dangi Oct 31 '17 at 07:45

score 9 · Answer 2 · answered Nov 02 '16 at 18:54

9

you can use 100vh instead 100%. vh = 1% of the height of the viewport.

.test {
  height: calc(100vh - 100px);
}

answered Nov 02 '16 at 18:54

Mojtaba Nazarzade

89
1
2

Simle, but this made my day! – Toik95 Apr 11 '19 at 15:46

score 1 · Answer 3 · answered Oct 25 '13 at 21:52

1

Why are there multiple height css styles for #wrap?

Try taking off height: auto !important;

http://jsfiddle.net/UaYfW/53/

answered Oct 25 '13 at 21:52

Nick Rolando

25,879
13
79
119

bootstrap 3 docs have similar code for sticky footer. i copied the same to make my footer stick to the bottom of the screen – Oct 25 '13 at 22:01
Looks like it is "sticking" to the bottom of the screen just fine with `#wrap { height: 100%; }`, no? – Nick Rolando Oct 25 '13 at 22:03
try minimizing the height of the browser. you will get the effect of that part of the code. the footer will gets hidden if the browser height will be less then 100px. but if i remove that part of the code the wrap area gets hidden and footer take all the space – Oct 25 '13 at 22:06
you have any fix for this? – Oct 25 '13 at 22:09
Is that a real concern? I do not have a fix for that without spending time figuring out why that's happening. It doesn't seem like a realistic problem worth spending time on though. – Nick Rolando Oct 25 '13 at 22:19
I didn't understand why it is happening so. mind telling me the reason. as i know height: auto will calculate the height automatically based on its children height. and as it is set to ! important. it will override others. – Oct 25 '13 at 22:26
Sorry, I don't know the reason. That might be a good question to ask on this site in itself. Good luck. – Nick Rolando Oct 25 '13 at 22:32

SantoshK · Answer 4 · 2016-10-19T11:45:30.557

below code will help you to fix the height the div .div{height: calc(100% - (20px + 30px));} working code as below :

html,body {
    background: blue;
    height:100%;
    padding:0;
    margin:0;
}
header {
    background: red;
    height: 20px;
    width:100%
}
h1 {
    font-size:1.2em;
    margin:0;
    padding:0;
    height: 30px;
    font-weight: bold;
    background:yellow
}
#theCalcDiv {
    background:green;
    height: -moz-calc(100% - (20px + 30px));
    height: -webkit-calc(100% - (20px + 30px));
    height: calc(100% - (20px + 30px));
    display:block
}

html code :

<header>Some nav stuff here</header>

<h1>This is the heading</h1>

<div id="theCalcDiv">This blocks needs to have a CSS calc() height of 100% - the height of the other elements.</div>

Working Example : http://jsfiddle.net/UF3mb/603/

why height: calc(100% - 100px) is not working

4 Answers4