问题:

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.

回答1:

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; }

回答2:

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/

               It works!

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

回答3:

It's working fine.....
  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

转载请标明出处:CSS Calc Viewport Units Workaround?

文章来源: CSS Calc Viewport Units Workaround?

标签

viewport

calc

css