如何计算固定宽度页面未使用空间的宽度

Question

我是css的新手，需要一些建议。我有固定宽度(1140 px(和中间居中的绿色背景的网页内容的DIV。

{position: relative; width: 1140px; height: 2000px; top: 0px; z-index:1; margin: 0px auto }

我现在想要实现的是侧面的 2 个div，它们只包含网页褪色为白色的颜色。所以屏幕的边框是白色的，它与中央div相遇的地方是绿色的。我知道线性梯度属性。问题是我不知道这些DIV会有多宽。有没有办法使它们相对于中央 DIV 使它们填充整个剩余空间到侧面，或者我必须计算它？

有人对此有一个简单而优雅的答案吗？

多谢

Answer 1

是的，有一种方法可以准确地填满剩余的空间。您可以使用 calc 在 css 中进行简单的计算，并且有一个度量单位可以非常方便vw。

100 vw = 视口宽度的 100%

因此，如果您知道您的中心div始终为1140像素，则可以轻松计算侧DIV的宽度，如下所示：

width: calc((100vw - 1140px)/2); 

浏览器支持现在应该相当不错：

VH，
• VW， VMIN， VMAX
• 计算

一个旁注，考虑使用伪元素:after和:before，而不是添加额外的div 只是为了样式，这被认为是不好的做法。您应该添加标记只是为了样式。

我将如何做到这一点的小演示：http://jsfiddle.net/669t4s3L/

Answer 2

显示图表会比这个锯齿形更好

一种方法是使用 js，我想 css 可以做到这一点。

试试这个：

<script>
document.getElementById("yourDivId").width = (window.innerWidth - 1140)/2
</script>

注意：不要忘记将此代码放在您的div 之后