Home > Article > Web Front-end > What's the Best Alternative to CSS's calc() Function for Browser Compatibility?
The calc() function offers a convenient way to dynamically calculate values in CSS. However, it may not be supported in older browsers like IE 5.5 and certain mobile browsers. Here's an alternative approach that works better across a wider range of browsers:
Almost every instance of calc(100% -
Original Approach (with calc()):
width: calc(100% - 500px);
Alternative Approach (without calc()):
.sidebar { position: absolute; top: 0; left: 0; width: 300px; background: orange; } .content { padding-left: 300px; width: 100%; box-sizing: border-box; background: wheat; }
Compatibility:
This alternative approach supports most major browsers, including IE 5.5 and above, Opera, and Android browsers.
Note: This solution relies on a precise value for the element's dimensions. If the element's dimensions are fluid or cannot be determined in advance, calc() may be the only viable option.
The above is the detailed content of What's the Best Alternative to CSS's calc() Function for Browser Compatibility?. For more information, please follow other related articles on the PHP Chinese website!