javascript - 在 css 中混合百分比和 px 而不使用 calc()

Question

我正在创建一个可调整大小的 <ul>与 2 <li>元素、标题和内容。 header 应保持在固定的 height: 35px; ，无论其余元素发生什么情况。我希望该内容占据 <ul> 的其余部分。问题是它永远无法填补其余部分，因为它以自己的速度增长，因此 <ul> 的余量很小。在底部。我可以用 height: calc(100% - 35px); 解决这个问题但支持 calc 的太少了。有没有办法不用计算器就能做到这一点？

<强> jsfiddle

Answer 1

您可以像这样使用跨浏览器计算

.foo {
  width: -webkit-calc(100% - 35px); //Chrome
  width: -moz-calc(100% - 35px); //firefox
  width: calc(100% - 35px); //IE
}

或者使用 JQuery:

document.getElementsByClassName("foo").style.width= window.innerWidth - 35;