Analysis of Calc function in CSS3 _CSS3

Calc () may be a stranger to everyone, and it's unlikely to believe that Calc () is part of the CSS. But it is a part of the CSS3, the following article is mainly about the Calc function in the CSS3 of the relevant information, the text through the sample code introduced in very detailed, the need for friends can refer to the following

Objective

In fact, before learning CSS3, I did not notice that there is calc () this attribute, and later in a look at a bull's code to see this, and then triggered a series of later search, study, and the birth of this blog. Well, no more nonsense, to do business.

Brief introduction

In fact, the Calc () Form seems to be very easy to think of JavaScript functions, of course, he is not a function of JS, but he has a function like functions, can be used to calculate, parentheses is an expression, usually with Calc () to specify the length of the element, regardless of width, Height, border or padding can be specified by him. In plain terms, calc () is a property of the length of a specified element of CSS3, and his special thing is that he can do the calculations, and support the mixing of various units, such as%, px, EM, etc. So this property is especially useful for those adaptive layouts.

Compatibility: In ie9+, ff4.0+, chrome19+, safari6+ have been better supported (it is said to use the supplier prefix, but I tested, not add is also available), but the mobile side of the support is not very good.

Body:

Recently in a project I met a very common problem, I believe everyone will meet, my needs are this, my sidebar height is hundred percent, just like the following example:

At this point I want to add some requirements on the top navigation bar, to achieve the effect similar to this, but want to be very depressed it has a scroll bar, the effect is as follows:

I do not want it to appear scroll bar, this time may be a lot of classmates will say, I can use absolute positioning and so on, but my top navigation bar is absolutely positioning ah, so I turned a css3, found a magical function, Calc!!! (Ah Nilua, ah Nilua, ah Nilua, ah Nilua ~ ~ ~)

Here are some of the coarse and tedious copy-and-paste functions described here:

The Calc () function is used to dynamically calculate length values.

Note that you need to keep a space before and after the operator, for example: Width:calc (100vh-10px);

Any length value can be calculated using the Calc () function;

The Calc () function supports "+", "-", "*", "/" operations;

The Calc () function uses standard mathematical precedence rules;

Supported version: CSS3

Compatibility: (at the beginning)

Go back to work, understand its content, and then look at the benefits it can bring you, such as: Eliminate the scroll bar, when I set the height of the parent to Height:calc (100VH-' My demand content height ') when the scroll bar magically disappeared, rendering the effect:

Dendendenden ~!!! Isn't it amazing why this is so? Because 100VH is equivalent to Window.innerheight, is the browser's internal height, scroll bar height is also counted. If high only set 100% is available height, does not include the height of the scroll bar, is not very useful for a thing (said so many people passed by to give a little praise to me, thank you ~)

In fact, not only high, there are a lot of application scenarios are can be achieved, such as we often give their own UL Li set padding or margin, when the number of Li does not exceed a certain number of it will not be changed to the second line, But sometimes because so a little padding or margin on the line, making left or right blank a place is difficult to see, we can use Calc this function to solve, I do not have an example of HA, I have limited technical level, said this, if the wrong place, I hope you can point out a lot , I wish everyone level jump, pay turn over again.