Height: Calc(100%) Not Working Correctly in CSS

height: calc(100%) not working correctly in CSS

You need to ensure the html and body are set to 100% and also be sure to add vendor prefixes for calc, so -moz-calc, -webkit-calc.

Following CSS works:

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
}

I also set your margin/padding to 0 on html and body, otherwise there would be a scrollbar when this is added on.

Here's an updated fiddle

http://jsfiddle.net/UF3mb/10/

Browser support is:
IE9+, Firefox 16+ and with vendor prefix Firefox 4+, Chrome 19+, Safari 6+

CSS - height:calc(100% - Nem) doesn't work when it is inside flex

You can use overflow: auto on scrolling element but you also need to add overflow: hidden on previous parent elements and you need to use flex: 1 also.

* {  /* So 100% means 100% */  box-sizing: border-box;}html,body {  height: 100%;  padding: 0;  margin: 0;}.flexbox-parent {  display: flex;  flex-direction: column;  height: 100%;}.flexbox-item-grow, .module{  flex: 1;  display: flex;  flex-direction: column;  overflow-y: hidden;}
.scrolling {  overflow-y: auto;  background: yellow;  flex: 1;}.header,.footer {  background: cyan;  height: 2em;}

<div class="flexbox-parent">  <div>    TOP  </div>  <div class="fill-area flexbox-item-grow">    <div class="flexbox-item-grow">      <div class="module">        <div class="header"></div>        <div class="scrolling">          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>          <p> Some Text</p>        </div>        <div class="footer"></div>      </div>    </div>  </div>  <div>    BOTTOM  </div></div>

width: calc(100% / 3); not working properly

2020 Answer

Use flexbox:

.container {
   width: 242px; /* /3 = 80.66̅  */
   height: 100px;
   
   display: flex;
}

.col {
  flex: 1 0 0; /* Set flex basis to 0 to force equal widths */
}

.col1 {
  background-color: red;
}
.col2 {
  background-color: green;
}
.col3 {
  background-color: blue;
}

<div class="container">
  <div class="col col1"></div>
  <div class="col col2"></div>
  <div class="col col3"></div>
<div>

Why is CSS calc(100%-250px) not working?

It's because you have to put a space between the + or - operator in order for it to work properly.

div {  background-color: blue;  height: 50px;  width: calc(100% - 250px);}

<div></div>

Height calc isn't responding at all

try this if you target modern browsers:

.maincol {
  height: calc(100vh - 300px);
  height: -moz-calc(100vh - 300px);
  height: -webkit-calc(100vh-300px);
  display: block;
}

or switch to bootstrap 4 if you can and use flex grid :)

CSS `height: calc(100vh);` Vs `height: 100vh;`

There's no difference, since any time the expression calc(100vh) is calculated, it always ends up being 100vh.

css calc invalid property value

You can't divide by units like px, only numbers.

CSS3 calc(100%-88px) not working in Chrome

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{This article mentions that the spacing is necessary for unambiguous parsing.}

Bad: calc(100%-88px)

Good: calc(100% - 88px)

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is ~~struck~~ through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

2022 Update - calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

Height: Calc(100%) Not Working Correctly in CSS