Question

我是css的新手，需要一些建议。我有DIV的网页内容有固定宽度（1140像素）和绿色背景，中间位于中间。

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

我现在想要实现的是两侧的两个div，它们只包含淡入白色的网页颜色。因此屏幕的边界是白色的，并且它与中央div相遇的地方是绿色。我知道线性梯度属性。问题是我不知道这些DIV会有多宽。有没有办法让它们相对于中央DIV，所以它们将整个剩余空间填满到一边或者我必须计算它？

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

非常感谢

Answer 1

显示图表的

比这个zigzag

好

这样做的一种方法是使用 js 和我猜css可以做到。

试试这个：

<script>

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

</script>

N.B：别忘了把这段代码放在div

之后

Answer 2

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

100 vw =视口宽度的100％

所以如果你知道你的中心div总是1140像素，你可以很容易地计算出这边的div的宽度：

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

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

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

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