How to Achieve \'width: calc(100% - 100px)\' Functionality in Older Browsers Using jQuery?

Alternative for "width: calc(100% -100px)" Using jQuery

The "width: calc(100% -100px)" CSS rule efficiently subtracts 100px from the object's full width. However, it faces compatibility issues, being supported only by modern browsers and not by Safari.

jQuery Alternative

To address this limitation, we can resort to jQuery. The following jQuery code achieves a similar effect:

$('#yourEl').css('width', '100%').css('width', '-=100px');

This code dynamically calculates the width of the object as 100% minus 100px and sets it as the CSS width.

Advantages of jQuery Method

• Ease of Use: jQuery simplifies the complex calculations, making it easier to implement the desired functionality.
• Compatibility: jQuery is widely supported across browsers, ensuring compatibility with older browsers that do not support "calc" expressions.

The above is the detailed content of How to Achieve \'width: calc(100% - 100px)\' Functionality in Older Browsers Using jQuery?. For more information, please follow other related articles on the PHP Chinese website!