CODEWITHSUNDEEP
htmlcssviewport-unitscss-calc
golmschenk
golmschenk

Reputation: 12384

CSS Calc Viewport Units Workaround?

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.

Upvotes: 72

Views: 148696

Answers (4)

Artif3x
Artif3x

Reputation: 4661

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.

body {
  margin: 0;
  padding: 0;
  background-color: #334;
  color: #eee;
}

.main {
  min-height: 100vh;
  min-width: 100vw;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 75vw 1fr;
}

.item {
  background-color: #558;
  padding: 2px;
  margin: 1px;
}

.item.dead {
  background-color: transparent;
}
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/index.css" />
  </head>

  <body>
    <div id="app">
      <div class="main">
        <div class="item">Item 1</div>
        <!-- <div class="item dead">Item 2 (dead area)</div> -->
      </div>
    </div>
  </body>
</html>

Upvotes: 0

MD Ashik
MD Ashik

Reputation: 9835

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

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

Upvotes: 6

Danield
Danield

Reputation: 125443

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

Upvotes: 79

MatTheCat
MatTheCat

Reputation: 18721

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>
<html>
    <head>
        <title></title>
    </head>
    <body>
        <div>It works!</div>
    </body>
</html>

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

Upvotes: 6

Related Questions