Why is the following `css` construction not valid?

Question

I want to use calc function but it is too simple.

#data {
  background: #333333;
  float: left;
  width: 70%;
  height: calc(data.width/4)px;
  margin-top: 3%;
  border-radius: 10px;
  border: 0px solid #333333;
}

Check fiddle: [Height is quarter width](http://jsfiddle.net/444zzx7k/1/) — Ani Menon, Nov 29 '16 at 03:39
*Why is the following `сss` construction not valid?* Because it's invalid syntax, both because of `data.width`, and because of the placement of `px`. I would suggest retitling your question to say something like "make div height 25% of width". — , Nov 29 '16 at 03:52

score 2 · Answer 1 · answered Nov 29 '16 at 03:46

It doesn't work because data.width isn't available, you can however use variables to achieve what you are wanting.

#container {
  width: 100%;
  height: 100px;
}
#data{
  --width: 70%;
  background-color:blue;
  width: var(--width);
  height: calc(var(--width)/4);
 }

<div id="container">
  <div id="data"></div>
</div>

score 1 · Answer 2 · answered Nov 29 '16 at 03:33

1

I understand you want height to be 1/4th the width.

This should do what you want:

#data{
  background-color:blue;
  width: 100%;
  height: 25vw;
 }

<div id="data"></div>

answered Nov 29 '16 at 03:33

Ani Menon

27,209
16
105
126

score 0 · Answer 3 · edited May 23 '17 at 12:01

Unfortunately, CSS currently doesn't allow using actual dimensions of the elements in calculations. The calc() function only allows operations with known values of the same type (e.g. lengths expressed in different length units).

To make the element with constant proportions (as your code implies) you can either:

Use viewport relative units, e.g.

#data {
  background: #333333;
  float: left;
  width: 70vw;
  /* note the white spaces around "/" and no extra units */
  height: calc(70vw / 4);
  /* or just height: 17.5vw; */
  margin-top: 3%;
  border-radius: 10px;
  border: 0px solid #333333;
}

<div id="data"></div>

Use the padding hack (in this case, you will need absolute position for your div content):

#data {
  background: #333333;
  float: left;
  width: 70vw;
  height: 0;
  padding-top: calc(70vw / 4);
  margin-top: 3%;
  border-radius: 10px;
  border: 0px solid #333333;
  position: relative;
}

<div id="data"></div>

Why is the following `css` construction not valid?

3 Answers3