在手写笔中使用 calc() 设置时高度不起作用
Height not working while setting it with calc() in stylus
我在我的 React 项目中使用手写笔。我正在使用 calc 函数来设置一些 div 的高度。但是计算并没有得到应用。在客户端,当我检查元素时,我看到 height 属性为 calc 但元素不遵守它。这就是我设置高度的方式
.ht-full-70 {
height: calc(100% - 70px) !important;
}
当我检查它时,我可以看到那里的样式
但是元素不接受这个。它仍然不受此影响。
因为.ht-full-70
的父标签没有设置height
您应该设置 .ht-full-70
的父标签的 height
。
我认为您需要在要为其设置宽度的元素周围环绕 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>
我在我的 React 项目中使用手写笔。我正在使用 calc 函数来设置一些 div 的高度。但是计算并没有得到应用。在客户端,当我检查元素时,我看到 height 属性为 calc 但元素不遵守它。这就是我设置高度的方式
.ht-full-70 {
height: calc(100% - 70px) !important;
}
当我检查它时,我可以看到那里的样式
但是元素不接受这个。它仍然不受此影响。
因为.ht-full-70
的父标签没有设置height
您应该设置 .ht-full-70
的父标签的 height
。
我认为您需要在要为其设置宽度的元素周围环绕 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>