Web Front-endCSS TutorialSolve the problem that the CSS3 Calc scroll bar does not jump on the pageSolve the problem that the CSS3 Calc scroll bar does not jump on the page
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(四则运算)
For example:
##
.elm {
width: calc(expression);
}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
<!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> Let’s explain the most commonly used one: the application that implements the page without jumping when the scroll bar appearsWhen 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%);
} or:
.wrap-outer {
padding-left: calc(100vw - 100%);
}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!
What is CSS Grid?Apr 30, 2025 pm 03:21 PMCSS Grid is a powerful tool for creating complex, responsive web layouts. It simplifies design, improves accessibility, and offers more control than older methods.
What is CSS flexbox?Apr 30, 2025 pm 03:20 PMArticle discusses CSS Flexbox, a layout method for efficient alignment and distribution of space in responsive designs. It explains Flexbox usage, compares it with CSS Grid, and details browser support.
How can we make our website responsive using CSS?Apr 30, 2025 pm 03:19 PMThe article discusses techniques for creating responsive websites using CSS, including viewport meta tags, flexible grids, fluid media, media queries, and relative units. It also covers using CSS Grid and Flexbox together and recommends CSS framework
What does the CSS box-sizing property do?Apr 30, 2025 pm 03:18 PMThe article discusses the CSS box-sizing property, which controls how element dimensions are calculated. It explains values like content-box, border-box, and padding-box, and their impact on layout design and form alignment.
How can we animate using CSS?Apr 30, 2025 pm 03:17 PMArticle discusses creating animations using CSS, key properties, and combining with JavaScript. Main issue is browser compatibility.
Can we add 3D transformations to our project using CSS?Apr 30, 2025 pm 03:16 PMArticle discusses using CSS for 3D transformations, key properties, browser compatibility, and performance considerations for web projects.(Character count: 159)
How can we add gradients in CSS?Apr 30, 2025 pm 03:15 PMThe article discusses using CSS gradients (linear, radial, repeating) to enhance website visuals, adding depth, focus, and modern aesthetics.
What are pseudo-elements in CSS?Apr 30, 2025 pm 03:14 PMArticle discusses pseudo-elements in CSS, their use in enhancing HTML styling, and differences from pseudo-classes. Provides practical examples.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.
MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.
Safe Exam Browser
Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.
