首頁  >  文章  >  web前端  >  解決CSS3 Calc捲軸出現頁面不跳動問題

解決CSS3 Calc捲軸出現頁面不跳動問題

巴扎黑
巴扎黑原創
2017-09-18 11:31:382035瀏覽

calc是css3的新功能,用來指定元素的長度,calc()最大的好處就是用在流體佈局上,可以透過calc()計算得到元素的寬度。接下來腳本之家小編給大家分享CSS3 Calc實作捲軸出現頁面不跳動問題,需要的朋友參考下吧

##什麼是calc()?##calc()從字面上我們可以把他理解為一個函數function。其實calc是英文單字calculate(計算)的縮寫,是css3的一個新增的功能,用來指定元素的長度。比方說,你可以使用calc()為元素的border、margin、pading、font-size和width等屬性設定動態值。為何說是動態值呢?因為我們所使用的表達式來得到的值。不過calc()最大的好處就是用在流體佈局上,可以透過calc()計算得到元素的寬度。

語法

calc() = calc(四则运算)

例如:

.elm {
  width: calc(expression);
}

其中"expression"是一個表達式,用來計算長度的表達式

說明

用於動態計算長度值。

    要注意的是,運算子前後都需要保留一個空格,例如:width: calc(100% - 10px);
  • #任何長度值都可以使用calc()函數來計算;
  • calc()函數支援"+", "-", "*", "/" 運算;
  • calc()函數使用標準的數學運算優先權規則;
相容性

簡單的例子:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    width: calc(100% - 50px);
    background: #eee;
}
</style>
</head>
<body>
<p class="test">我的宽度为100% - 50px</p>
</body>
</html>

下面就來講解下最常用的這個:實作滾動條出現頁面不跳動的應用程式

當頁面內容動態加載,開始沒有滾動條,內容增多後出現滾動條,這時使用固定寬度居中對齊佈局會向左偏移一個滾動條寬度。解決方法可以為內容全部加上overflow-y:scroll;或是根據內容用css填好再補充內容。本文介紹的是calc來計算滾動條寬度,當有捲軸時,內容外部也給它模擬一個滾動條寬度,因而就不會偏移了。 ·

很簡單,只要一行程式碼就搞定了:

.wrap-outer {
    margin-left: calc(100vw - 100%);
}

或:

##
.wrap-outer {
    padding-left: calc(100vw - 100%);
}

首先,.wrap-outer指的是居中定寬主體的父級,如果沒有,創建一個(使用主體也是可以實現類似效果,不過本著寬度分離原則,不建議);

然後,calc是css3中的計算,IE10+瀏覽器支持,IE9瀏覽器基本上支持(不能用在background-position上);

最後,100vw相對於瀏覽器的window.innerWidth,是瀏覽器的內部寬度,注意,滾動條寬度也計算在內!而100%是可用寬度,是不含滾動條的寬度。

於是,calc(100vw - 100%)就是瀏覽器捲軸的寬度大小(如果有,如果沒有滾動條則是0)!左右都有一個滾動條寬度(或都是0)被佔用,主體內容就可以永遠居中瀏覽器啦,從而沒有任何跳動!

以上是解決CSS3 Calc捲軸出現頁面不跳動問題的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn