html - 浏览器缩放和元素宽度

Question

我的设计中有一条线，我的内容有一个 width: 1200px，但我想让这条线有 width: 100%，相对于屏幕，例如当用户调整(使用浏览器缩放)屏幕大小时，将其变小此行需要仍​​然有 width: 100%，其他元素将保持 width: 1200px，并且它有效，但是当我缩放屏幕以使元素更大(缩放 130%)时，线条变小，当我使用滚动条滚动到屏幕的右侧时，线条被撕裂。这是该行的样式:

#blue_line {
position: absolute;
width: 100%;
left: 0;
right: 0;
height: 5px;
background-color: #08c5ef;
z-index: 20;

如果需要，我可以发布 fiddle 。谢谢!

Answer 1

如果我正确理解你的问题，在高度上使用 vh(视口(viewport)高度)应该可以解决这个问题。

#blue_line {
    position: absolute;
    width: 100%;
    left: 0;
    right: 0;
    height: 1vh;
    background-color: #08c5ef;
    z-index: 20;
}