CSS Calc Viewport Units Workaround

Question

From what I ve seen in other answers  CSS viewport units can t be used in calc   statements yet  What I would like to achieve is the following statement   height  calc 100vh - 75vw    Is there some workaround way I can achieve this using purely CSS even though the viewport units can t be used in the calc   statement  Or just CSS and HTML  I know I can do it dynamically using javascript  but I d prefer CSS

User · Accepted Answer

Before I answer this  I d like to point out that Chrome and IE 10  actually supports calc with viewport units   FIDDLE  In IE10    Solution  for other browsers   box-sizing  1  Start of by setting your height as 100vh   2  With box-sizing set to border-box - add a padding-top of 75vw  This means that the padding will be part f the inner height    3  Just offset the extra padding-top with a negative margin-top   FIDDLE  div         height  calc 100vh - 75vw         height  100vh      margin-top  -75vw      padding-top  75vw      -moz-box-sizing  border-box      box-sizing  border-box      background  pink

User · Answer

Doing this with a CSS Grid is pretty easy  The trick is to set the grid s height to 100vw  then assign one of the rows to 75vw  and the remaining one  optional  to 1fr  This gives you  from what I assume is what you re after  a ratio-locked resizing container   Example here  https   codesandbox io s 21r4z95p7j  You can even utilize the bottom gutter space if you so choose  simply by adding another  item    Edit  StackOverflow s built-in code runner has some side effects  Pop over to the codesandbox link and you ll see the ratio in action    x000D   x000D  body   x000D    margin  0  x000D    padding  0  x000D    background-color   334  x000D    color   eee  x000D    x000D   x000D   main   x000D    min-height  100vh  x000D    min-width  100vw  x000D    display  grid  x000D    grid-template-columns  100   x000D    grid-template-rows  75vw 1fr  x000D    x000D   x000D   item   x000D    background-color   558  x000D    padding  2px  x000D    margin  1px  x000D    x000D   x000D   item dead   x000D    background-color  transparent  x000D    x000D   lt html gt  x000D     lt head gt  x000D       lt title gt Parcel Sandbox lt  title gt  x000D       lt meta charset  UTF-8    gt  x000D       lt link rel  stylesheet  href  src index css    gt  x000D     lt  head gt  x000D   x000D     lt body gt  x000D       lt div id  app  gt  x000D         lt div class  main  gt  x000D           lt div class  item  gt Item 1 lt  div gt  x000D           lt  --  lt div class  item dead  gt Item 2  dead area  lt  div gt  -- gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt div gt It s working fine      lt  div gt   div        height  calc 100vh - 8vw       background   000      overflow visible      color  red      Check here this css code right now support All browser without Opera   just check this    Live   see Live preview by jsfiddle   See Live preview by codepen io

User · Answer

As a workaround you can use the fact percent vertical padding and margin are computed from the container width  It s quite a ugly solution and I don t know if you ll be able to use it but well  it works  http   jsfiddle net bFWT9    lt  DOCTYPE html gt   lt html gt       lt head gt           lt title gt  lt  title gt       lt  head gt       lt body gt           lt div gt It works  lt  div gt       lt  body gt   lt  html gt      html  body  div       height  100     body       margin  0    div       box-sizing  border-box      margin-top  -75       padding-top  75       background   d35400      color   fff

[html] CSS Calc Viewport Units Workaround?

FIDDLE (In IE10+)

Solution (for other browsers): box-sizing

FIDDLE

Examples related to html

Examples related to css

Examples related to viewport-units

Examples related to css-calc