https://jsfiddle.net/z3fhtbq9/
我希望上面的小提琴会从身体的顶部到底部显示红色的背景颜色。但它没有。为什么？
<div style="background-color:red;position:relative;top:0px;bottom:0px;">
【问题讨论】：
标签： css css-position
添加一个 div 大小（高度宽度）..它会工作
<div style="height: 100vh;background-color:red;position:relative;top:0px;bottom:0px;">
</div>
div 的高度为 0，width 为 0（宽度始终相同），这就是为什么没有观察到变化的原因。如果您在 div 中添加了一些内容，例如一些文本，或者只是给出了一个高度-宽度，它可能会起作用。
这里的 100vh 意味着元素将始终是设备视口的 100% 高度。
具有绝对定位的元素不受其他元素的影响 并且不影响其他元素。所以基本不受影响 通过任何其他元素。所以 100% vh 对它不起作用。它会工作 如果你放入一个相对定位的全尺寸 div。绝对 定位元素相对于最近定位的元素进行定位 祖先（非静态）。
【讨论】：
width 是 100%，只有没有任何 height。
我看不出与定位的关系，但要用这个 div 填充 body，您需要设置元素的宽度和高度。你可以在css上设置：
html, body {width:100%; height:100%; margin:0;}
然后在您的 div 样式中添加 100% 的宽度和高度，如下所示：
<div style="width:100%; height:100%; background-color:red;position:relative;top:0px;bottom:0px;"></div>
或者你可以把红色背景样式放在body div上。
【讨论】：