在手写笔中使用 calc() 设置时高度不起作用答案

【问题标题】：Height not working while setting it with calc() in stylus在手写笔中使用 calc() 设置时高度不起作用
【发布时间】：2017-09-17 08:44:53
【问题描述】：

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

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

当我检查它时，我可以看到那里的样式

但是 element 没有接受这个。它仍然不受此影响。

【问题讨论】：

我猜要么是父元素没有设置高度，要么你的元素不是块状的
首先我会检查父级以查看它的高度。值得注意的是，当我检查一个具有计算高度的元素时，它会显示它，而不是它的结果。
好的，所以它的父 div 有 height: calc(100%-20px) 这也不起作用，然后下一个父级有高度 100%

标签： css stylus

【解决方案1】：

我认为您需要一个环绕您尝试为其设置宽度的元素的 div。如果你也给这个包裹一个高度，这将确保元素有一个设定的百分比起点。我在这个 sn-p 中演示了它。

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

【讨论】：

【解决方案2】：

因为.ht-full-70的父标签没有设置height

你应该设置height的.ht-full-70的父标签。

【讨论】：

好的，所以它的父 div 有 height: calc(100%-20px) 这也不起作用，然后下一个父级的高度为 100%。
设置正文的height。例如，body{height: 100vh}
但是当我设置 height:700px 时它就可以工作了。那么 calc 也应该可以工作，对吧？
不，它没有。这就是问题所在。当我将其设置为 height:700px 但 calc 不起作用时，它可以工作。
@ApurvG 我可以看看你的完整代码吗？（HTML、CSS）