CSS - 将固定宽度更改为计算宽度

Question

我可以使用JS从

合法地更改CSS宽度

width: 100%

为：

width: calc(100% - 180px);

即。将JS插入属性后，CSS3 calc函数会起作用吗？

可能有更好的方法（浮动等），但这是由于左侧导航栏的出现。这也适用于JQuery方法来设置宽度？

Answer 1

我无法保证$().width('calc()')兼容性，但如果直接将其设置为宽度样式，它应该可以正常工作。

$('myselector').css('width','calc(100% - 180px)');

但是有什么理由你不能直接把它放在CSS中吗？

Answer 2

我认为你应该通过其他方式来解决这个问题。以下是一些选项：

• 在元素上设置box-sizing: border-box;并在左侧添加180px填充。
• 为内容包装器（不包含导航栏）提供180px的左侧填充。

注意：box-sizing: border-box可以说是所有元素的首选属性，因为在设置填充和边框时它不会弄乱你的宽度。

Answer 3

试试这个：

Some of the browsers not support calc(); so please try following jquery 
$('your id').css('width', '100%').css('width', '-=100px');