Home » Html » CSS Calc Viewport Units Workaround?

CSS Calc Viewport Units Workaround?

Posted by: admin November 30, 2017 Leave a comment


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.


Before I answer this, I’d like to point out that Chrome and IE 10+ actually supports calc with viewport units.


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


    /*height: calc(100vh - 75vw);*/
    height: 100vh;
    margin-top: -75vw;
    padding-top: 75vw;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: pink;


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/

<!DOCTYPE html>
        <div>It works!</div>

html, body, div {
    height: 100%;
body {
    margin: 0;
div {
    box-sizing: border-box;
    margin-top: -75%;
    padding-top: 75%;
    background: #d35400;
    color: #fff;

<div>It's working fine.....</div>

     height: calc(100vh - 8vw);
    background: #000;
    color: red;

Check here this css code right now support All browser without Opera

just check this


see Live preview by jsfiddle

See Live preview by codepen.io