height calc 100 not working correctly in CSS

Question

I have a div that I want to fill the whole height of the body less a set number in pixels  But I can t get height  calc 100  - 50px  to work    The reason I want to do this is I have elements that have dynamic heights based on some varying criteria  e g  height of the header changes based on different elements it can contain  A content div then needs to stretch to fill the rest of the available space available   The div element  however  stays the height of the content - it doesn t seem as if it interprets 100  to be the height of the body element    x000D   x000D  body   x000D    background  blue  x000D    height  100   x000D    x000D   x000D  header   x000D    background  red  x000D    height  20px  x000D    width  100   x000D    x000D   x000D  h1   x000D    font-size  1 2em  x000D    margin  0  x000D    padding  0  x000D    height  30px  x000D    font-weight  bold  x000D    background  yellow  x000D    x000D   x000D   theCalcDiv   x000D    background  green  x000D    height  calc 100  -  20px   30px    x000D    display  block  x000D    x000D   lt header gt Some nav stuff here lt  header gt  x000D   lt h1 gt This is the heading lt  h1 gt  x000D   lt div id  theCalcDiv  gt This blocks needs to have a CSS calc   height of 100  - the height of the other elements  lt  div gt  x000D   x000D   x000D    I would appreciate any help or pointers in the right direction

User · Answer

First off - check with Firebug or what ever your preference is  whether the css property is being interpreted by the browser   Sometimes the tool used will give you the problem right there  so no more hunting   Second off - check compatibility  http   caniuse com  feat calc  And third - I ran into some problems a few hours ago and just resolved it   It s the smallest thing but it kept me busy for 30 minutes   Here s how my CSS looked    someElement       height calc 100 -100px       height -moz-calc 100 -100px       height -webkit-calc 100 -100px       Looks right doesn t it  WRONG Here s how it should look    someElement       height calc 100  - 100px       height -moz-calc 100  - 100px       height -webkit-calc 100  - 100px       Looks the same right   Notice the spaces    Checked android browser  Firefox for android  Chrome for android  Chrome and Firefox for Windows and Internet Explorer 11   All of them ignored the CSS if there were no spaces   Hope this helps someone

User · Answer

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

User · Answer

All the parent elements in the hierarchy should have height 100   Just give max-height 100  to the element and max-height calc 100  - 90px  to the immediate parent element    It worked for me on IE also   html  body       height  100     parent-element       max-height  calc 100  - 90px      element       height 100       The Rendering in IE fails due to failure of Calc when the window is resized or data loaded in DOM  But this method mentioned above worked for me even in IE

User · Answer

If you are styling calc in a GWT project  its parser might not parse calc for you as it did not for me    the solution is to wrap it in a css literal like this   height  literal  -moz-calc 100  -  20px   30px      height  literal  -webkit-calc 100  -  20px   30px      height  literal  calc 100  -  20px   30px

User · Answer

I was searching why   doesn t seem to work  So  I tested out using 100vh instead of just setting it at 100  it seems that 100vh works really well across almost all browsers devices    example  you want to only display the top div to the user before it scrolls  like a hero banner module  But  at the top of the page is a navbar which is 68px in height  The following doesn t work for me at all doing just      height  calc 100  - 68px      There s was no change  The page just stayed the same  However  when swapping this to  vh  instead it works great  The div block you assign it too will stay on the viewer s device hight only  Until they decide to scroll down the page   height  calc 100vh - 68px      Change the   - to include how big your header is on the top   If your navbar is say 120px in height then change 68px to 120px   Hope this helps anyone who cannot get this working with using normal height  calc

User · Answer

You don t need to calculate anything  and probably shouldn t    lt  DOCTYPE html gt   lt head gt   lt style type  text css  gt      body  background  blue  height 100        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-color green  padding-bottom  100    lt  style gt   lt  head gt   lt body gt   lt header gt Some nav stuff here lt  header gt   lt h1 gt This is the heading lt  h1 gt   lt div class  theCalcDiv  gt This blocks needs to have a CSS calc   height of 100  - the height of the other elements   lt  div gt    I stuck it all together for brevity

User · Answer

try setting both html and body to height 100    html  body  background  blue  height 100

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

Examples related to css