Solve the problem that the CSS3 Calc scroll bar does not jump on the page-CSS Tutorial-php.cn

Solve the problem that the CSS3 Calc scroll bar does not jump on the page

巴扎黑

Release： 2017-09-18 11:31:38

Original

2092 people have browsed it

Calc is a new function of CSS3, used to specify the length of elements. The biggest benefit of calc() is that it is used in fluid layout. The width of the element can be calculated through calc(). Next, the editor of Script House will share with you the CSS3 Calc implementation of the scroll bar problem where the page does not jump. Friends who need it can refer to it

What is calc()?

calc() Literally we can understand it as a function function. In fact, calc is the abbreviation of the English word calculate. It is a new function of CSS3 and is used to specify the length of elements. For example, you can use calc() to set dynamic values for the border, margin, padding, font-size, and width properties of an element. Why is it called a dynamic value? Because we use expressions to get the value. However, the biggest benefit of calc() is that it can be used in fluid layout. The width of the element can be calculated through calc().

Grammar

calc() = calc(四则运算)

Copy after login

For example:

.elm {
  width: calc(expression);
}

Copy after login

where "expression" is an expression, Expression used to calculate length

Description

is used to dynamically calculate the length value.

It should be noted that a space needs to be reserved before and after the operator, for example: width: calc(100% - 10px);
Any length value can be calculated using the calc() function;
The calc() function supports "+", "-", "*", "/" operations;
The calc() function uses standard mathematical operation precedence rules;

Compatibility

Simple example:

<!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>

Copy after login

Let’s explain the most commonly used one: the application that implements the page without jumping when the scroll bar appears

When the page content is loaded dynamically, there is no scroll bar at first, and the scroll bar appears after the content increases. At this time, using a fixed-width center-aligned layout will shift one scroll bar width to the left. The solution can be to add overflow-y:scroll to all the content; or fill it with CSS according to the content and then add the content. This article introduces calc to calculate the scroll bar width. When there is a scroll bar, a scroll bar width is also simulated outside the content, so it will not be offset. ·

is very simple, just one line of code is required:

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

Copy after login

or:

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

Copy after login

First, .wrap-outer refers to the parent of the centered fixed-width body. If not, create one (similar effects can be achieved using the body, but it is not recommended based on the principle of width separation);

Then , calc is a calculation in CSS3, supported by IE10+ browsers, and basically supported by IE9 browsers (cannot be used on background-position);

Finally, 100vw is relative to the browser's window.innerWidth. Internal width, note that scroll bar width is also counted! And 100% is the available width, which is the width without scroll bars.

So, calc(100vw - 100%) is the width of the browser scroll bar (if there is one, if there is no scroll bar, it is 0)! If there is a scroll bar width on the left and right (or both are 0), the main content can always be centered in the browser without any jumps!

The above is the detailed content of Solve the problem that the CSS3 Calc scroll bar does not jump on the page. For more information, please follow other related articles on the PHP Chinese website!