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

來源:互聯網
上載者:User
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)被佔用,主體內容就可以永遠置中瀏覽器啦,從而沒有任何跳動!

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.