浏览器缩放和元素宽度

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;

}

如果需要我可以postfiddle。谢谢！

Answer 1

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

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

浏览器缩放和元素宽度

Browser zoom and elements width

html

css

position