Question

我想使用calc功能，但这太简单了。

＆＃13;

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

＆＃13;

Answer 1

它不起作用，因为data.width不可用，但是你可以使用变量来实现你想要的。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我知道你希望身高是宽度的1/4。

这应该做你想要的：

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

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

Answer 3

不幸的是，CSS目前不允许在计算中使用元素的实际尺寸。 calc() function仅允许具有相同类型的已知值的操作（例如，以不同长度单位表示的长度）。

要使元素具有恒定比例（如代码所示），您可以：

使用视口相对单位，例如

#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>

使用the padding hack（在这种情况下，您的div内容需要绝对位置）：

#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>

为什么以下`css`结构无效？

3 个答案: