Within the css calc() function, what does 100% refer to and what is the equivalent code in JavaScript?
#div1 {
width: calc(100% - 100px);
}
JSFiddle: /
Within the css calc() function, what does 100% refer to and what is the equivalent code in JavaScript?
#div1 {
width: calc(100% - 100px);
}
JSFiddle: https://jsfiddle.net/xoufnm6v/
Share Improve this question edited Feb 10, 2016 at 11:47 Michael 44.2k12 gold badges96 silver badges141 bronze badges asked Feb 10, 2016 at 9:56 user4648588user4648588 5 |5 Answers
Reset to default 5100% refers to 100% of the width of the parent element. This calculation gives the current element a width 100 pixels narrower than it's parent.
what is 100% means
It is the percentage of the width of the parent. In this case it refers to 100% width of the parent element.
what is the equivalent in javascript
Assuming you meant what it 100%-75 would be implemented in javascript/jquery
$(window).on("resize",function(){
$('#element').css("width", ( $('#element').parent().width()-75 ) + "px");
});
or simply this
$('#element').css("width","calc(100% - 75px)");
simple javascript equivalent would be
element.style.cssText = "width: calc(100% - 75px);"
100% refers to a percentage of the width of the containing element. So, 100% means the same width as the container.
In the referenced example <body> is the containing element, so 100% refers to the width of the <body>. From that calc() subtracts 100 pixels to arrive at the rendered size.
The calculated width responds to changes in the width of the containing element; if you resize the page you will see the <div> respond accordingly.
calc() is a native CSS way to do simple math right in CSS as a replacement for any length value (or pretty much any number value). It has four simple math operators: add (+), subtract (-), multiply (*), and divide (/). Being able to do math in code is nice and a welcome addition to a language that is fairly number heavy.
But is it useful? I've strained my brain in the past trying to think of obviously useful cases. There definitely are some though.
This is the one basic example.
div{
background: green;
width: 70%;
}
span{
width: calc(100% - 150px);
background: red;
display: block;
color: white;
}<div> <span>calc(100% - 150px) </span></div>When can't calculate % with other values, like px, em, cm, etc .Above example you can done in JavaScript, but calc() will help to calculate the value in CSS.
For further information please check in google or Please refer here https://css-tricks.com/a-couple-of-use-cases-for-calc/
The 100% is to do with the width property.
The width property sets the width of an element.
Note: The width property does not include padding, borders, or margins; it sets the width of the area inside the padding, border, and margin of the element!
The % operator defines the width as a percentage of the containing block. So in the example the 100% is 100% of the page body, less the width of the the padding, border, and margin of the div. Then the calculation subtracts a further 100px from that.
http://www.w3schools.com/cssref/pr_dim_width.asp
width: calc(100% - 100px)toright: 50pxto achieve the same thing as being described, the yellow box ends up narrower - ie they haven't come up with an entirely accurate demo. – James Thorpe Commented Feb 10, 2016 at 10:04box-sizingspecified, thewidthhere is the inner width of the element - that is the width with thepaddingandborderfactored out.leftandrightignore theborderandpaddingcompletely, thus making the element 12px larger when bothleftandrightare applied (2 * 5px padding + 2* 1px border) – James Donnelly Commented Feb 10, 2016 at 10:07