我是 CSS 新手，需要一些建议。我有一个 DIV，其中包含固定宽度(1140 像素)的网页内容和居中的绿色背景。
{position: relative; width: 1140px; height: 2000px; top: 0px; z-index:1; margin: 0px auto }
我现在想要实现的是两侧的 2 个 div，其中只包含网页颜色渐变为白色。所以屏幕的边框是白色的，它与中央 div 相交的地方是绿色的。我知道线性渐变属性。问题是我不知道这些 DIV 的宽度。有没有办法让它们相对于中央 DIV，以便它们将整个剩余空间填充到侧面，或者我必须计算它？
有人对此有一个简单而优雅的答案吗？
非常感谢
最佳答案
是的，有一种方法可以完全填满剩余的空间。您可以使用 calc 在您的 css 中进行简单的计算，并且有一个测量单位 vw 可以派上用场。
100 vw = 视口(viewport)宽度的 100%
因此，如果您知道中心 div 始终为 1140 像素，则可以像这样轻松计算侧面 div 的宽度:
width: calc((100vw - 1140px)/2);
现在的浏览器支持应该相当不错了:
旁注，考虑使用伪元素 :after 和 :before 而不是仅为样式添加额外的 div，这被认为是不好的做法。您应该只为样式添加标记。
我将如何做的一个小演示: http://jsfiddle.net/669t4s3L/
关于html - 如何计算固定宽度页面未使用空间的宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27580827/