css-calc

问题 Why this one calc(100vw/4) works but neither of the following do? calc(100vw/4-(10-4)) calc(100vw/4-(10px-4)) calc(100vw/4-(10px-4px)) calc(100vw/4-calc(10px-4px)) How do I manage the the expression calc(100vw/x-(10px-x)) where x gets replaced in a SASS loop to work? 回答1: You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses. From the documentation: Note : The + and

问题 *{ margin:0; padding: 0; } body { background-color: orangered; } .content { margin-top: 200px; height: 100vh; background-color: #fdfdff; } .tilt { position: relative; } .tilt:before { content: ''; padding-top: 8.74887%; position: absolute; left: 0; right: 0; bottom: 100%; background-image: linear-gradient(5deg, #fdfdff calc(50% - 1px), transparent 50%); } <div class="content tilt"> </div> It seems that IE11 has some problems understanting calc() css property. I am using calc with linear

问题 Is there a way to use the calc function in @supports(propertyName, value)? i mean where <supports_condition> is only for the calc function. @supports ( <supports_condition> ) { .col-3 { width: calc(25% - 20px/4) } .col-4 { width: calc(33.3333333% - 20px/3) } .col-6 { width: calc(50% - 20px/2) } } 回答1: Support for @supports is far, far more restricted than calc() because the latter was introduced several years earlier (most notably, IE doesn't support @supports at all, whereas it has supported

问题 I'm trying to calculate the right scale to apply to children inside a parent but i can't use calc() inside transform: scale CSS function. I've done this function with javascript but i'm interested in a pure CSS solution to avoid bloating the page with scripts as much as possible. Example: CSS .anyclass{ height:250px; /*this value can change dinamically */ transform:scale(calc(100% / 490 )); /*is using height value*/ } This definition gives back an invalid property value. Other uses like

问题 I'd like to calculate the number of rows in a grid template using calc() , but trying to get the repeat count with division isn't working: .grid { display: grid; grid-gap: 10px; grid-template-columns: 1fr; margin-bottom: 10px; background: rgba(0, 0, 0, 0.2); } .grid>div { background: tomato; width: 20px; text-align: center; margin: auto; } .grid.no-calc { grid-template-rows: repeat(3, 30px); } .grid.addition { grid-template-rows: repeat(calc(1 + 2), 30px); } .grid.subtraction { grid-template

问题 I have the following situation: div { width: calc((100% / 11) - 9.09px); } In the context, 100% = 1440px, and 9.09px is generated in mathematics with sass. The results is: 94.55px, because the calc function rounds up, but I need 94.54px (round down). How can I round down to the nearest hundredths place? #Edit: example. 回答1: Unfortunately, there is not a native way in CSS to round (or ceil/floor) numbers. However — you mentioned you are using Sass. I found a small Sass library that can round,

问题 Hopefully this is quite simple. I want to use the CSS calc operation to perform two calculations: I want to set my width to the equivalent of (100% / 7) - 2 However if I try to perform more than one operation in a CSS calc operation, it fails: width: calc((100% / 7) - 2); How can I perform multiple calc operations in one CSS statement? 回答1: Apparently you have to assign px or % to all numbers that are not being multiplied or divided. width: calc((100% / 7) - 2px); Well I feel dumb now. Haha.

问题 Is it possible to use calc() to multiply or divide with unit-based values (like 100%, 5px, etc). For example I was hoping to do something like this: width: calc(100% * (.7 - 120px / 100%)); Hoping it resolved to something like (assuming 100% = 500px): width: calc(500px * (.7 - 120px / 500px)); width: calc(500px * (.7 - .24)); width: calc(500px * .46); width: calc(230px); However after some experimenting it looks like I can't have a unit-based value as the denominator for division. I also don

问题 Is there a way to use variables in less ~ operator, like ~"calc(70% - @spacing)"; When I have tried it it only works with static values like ~"calc(70% - 10px)"; Can I get the string to be evaluated prior to beeing set as a property. 回答1: To disable the calculation which LESS does automatically when discovering a - between two numeric values but still being able to use variables, you can write one of the following: 1) Only escape the operator that triggers the calculation and use the variable

问题 I've found a (hacky) way to have a div take up the full viewport of a browser, minus a pixel-based margin, by utilizing the CSS3 calc property like so (see fiddle): html, body { height: 100%; margin: 0; overflow: hidden; } div { background: linear-gradient(red, yellow); height: calc(100% - 26px); margin: 13px 0 0 13px; width: calc(100% - 26px); } <body> <div></div> </body> Is it possible to do the same thing with only CSS 2.1 properties? I know calc has been supported in most browsers for