CODEWITHSUNDEEP
htmlcssattributeswidth
Arihant
Arihant

Reputation: 4047

Is there a way to have calculations html width attribute?

I was wondering if it is possible to have calculations in HTML width attribute. Something like:

<SVG width="100%-10px">

or a CSS workaround for the same?

Upvotes: 0

Views: 329

Answers (3)

Nikolay Babanov
Nikolay Babanov

Reputation: 421

As @Hunter suggested, you could use calc(), but I would advise against it, because:

Due to the way browsers handle sub-pixel rounding differently, layouts using calc() expressions may have unexpected results.

source: http://caniuse.com/#feat=calc

Just use javascript, if it has to be that dynamic to ensure everything would look the same on all browsers.

HTML:

<div class="parent">
    <svg class="dynamic-width"></svg>
</div>

JS:

var parent = document.getElementsByClassName('parent')[0];
var pixelsToSubtract = 10;
var svg = document.getElementsByClassName('dynamic-width')[0];
svg.style.width = parent.getBoundingClientRect().width - 10 + 'px';

Upvotes: 2

Tjoeaon
Tjoeaon

Reputation: 1523

I think the thing you're looking for is the CSS calc() function http://www.w3schools.com/cssref/func_calc.asp

Here is an example width: calc(100% - 10px);

You can use mathematical expression such as + - * /

Upvotes: 1

Hunter Turner
Hunter Turner

Reputation: 6894

calc() works just fine for this:

svg {
  background-color: red;
  width: calc(100% - 200px);
}
<svg></svg>

Upvotes: 1

Related Questions