使用手写笔中的calc()设置高度时,高度不起作用

时间:2017-08-30 13:58:05

标签: css stylus

我在我的React项目中使用手写笔。我正在使用calc函数来设置一些div的高度。但是这个计算并没有得到应用。在客户端,当我检查元素时,我将height属性视为calc,但元素并不遵守它。这就是我设置身高的方式

.ht-full-70 {
  height: calc(100% - 70px) !important;
}

当我检查它时,我可以看到那里的风格

enter image description here

但元素没有采取这个。它仍然不受此影响。

2 个答案:

答案 0 :(得分:1)

我认为你需要一个围绕你试图设置宽度的元素的包裹div。这样可以确保元素具有百分比的设置起点,如果您也将此包裹设置为高度。我在这个片段中演示了它。



.ht-wrap {
  padding-top:20px;
  display;inline-block;
  height:280px;
  background-color:blue;
}

.ht-full-70 {
  padding:6px;
  display;inline-block;
  height: calc(100% - 70px) !important;
  background-color:red;
}

<div class="ht-wrap">
  <div class="ht-full-70">
    <p>Text.</p>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

由于.ht-full-70的父标记未设置height

您应该设置height父标记的.ht-full-70