使用触笔中的calc（）进行设置时高度不工作

我在我的React项目中使用了手写笔。我正在使用calc函数来设置一些div的高度。但是calc没有得到应用。在客户端检查元素时，我看到height属性为calc，但元素不服从它。这是我如何设置高度使用触笔中的calc（）进行设置时高度不工作

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

当我检查它，我可以看到风格有

但是元素不考虑这一点。它不受此影响。

来源

2017-08-30 ApurvG

我想无论是家长有没有高度设置或你的元素是不能阻止像 – lumio

首先，我会检查父看到这有什么高度。值得注意的是，当我检查一个具有calc高度的元素时，它将显示该元素，而不是它的工作原理。 – wrayvon

好吧所以它的父div有高度：calc（100％-20px）这也不起作用，然后下一个父母有高度100％ – ApurvG

我认为你需要围绕你试图设置宽度的元素包装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>

来源

2017-08-30 14:56:59 wariostarx

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

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

来源

2017-08-30 13:59:41 zynkn

好吧，所以它的父div有高度：calc（100％-20px）这也没有' t工作，然后下一个家长有高度100％。 – ApurvG

设置身体的“身高”。例如，'body {height：100vh}' – zynkn

但是，当我设置高度：700px然后它的作品。钙也应该工作，对吧？ – ApurvG

使用触笔中的calc（）进行设置时高度不工作

回答

相关问题