css - 如何在没有绝对位置的情况下为 mozilla firefox 在 CSS 中使用 calc

Question

我会 like a div to be 100% height minus 197px在每个屏幕上。我使用了 CSS 函数 cal，如下所示。

<style>
#div1 {

    left: 300px;
    height: calc(100% - 197px);

    border: 1px solid black;
    background-color: yellow;

}
</style>

p>Create a div that stretches across the window, with a 50px gap between both sides of the div and the edges of the window:</p>
<div id="div1">Some text...</div>

到目前为止，它在大多数浏览器上都有效，除了 Firefox，它仅在我添加 position: absolute;

时有效

我的问题是 Position absolute 与我之前的一些代码产生了冲突。所以我的问题是如何在没有绝对位置的情况下为 mozila firefox 在 CSS 中使用 calc？

Jsfiddle

Answer 1

对于所有Mozilla和Safari，Chrome和IE所有版本都支持此代码

height:clac(100% - 197px);
height:-webkit-clac(100% - 197px);
height:-moz-clac(100% - 197px);