勵志

勵志人生知識庫

calc不起作用

CSS中使用`calc`屬性時,如果`calc`不起作用,可能存在以下兩個問題:

格式錯誤:`calc`屬性需要正確的書寫格式,即運算符的兩邊應該留有空格。錯誤的例子是:`div{width:calc(100%-50px)}`,這裡運算符`-`兩邊沒有空格,因此不會生效。正確的例子應該是:`div{width:calc(100% - 50px)}`。

父元素需要設定高度或者寬度:如果`calc`屬性用於子元素,那麼父元素需要設定確切的高度或寬度,不能使用`100%`。例如,如果`main`元素的高度和寬度都設定為`100%`,那麼`main`元素內部使用`calc`計算高度的子元素將無法正確計算高度。正確的例子是:`main{width: 100%;height: 100px;main > div{height: calc(100% - 50px);}`。

此外,如果使用`calc`與變數結合,例如`$rem`,也需要確保正確的格式,即運算符兩邊留有空格。錯誤的例子是:`height:calc(100vh - $rem);`,這裡`-`兩邊沒有空格。正確的寫法應該是:`height:calc(100vh - $rem);`或`height:calc(100vh - #($rem));`。