黑色条纹最大屏幕最大高度的10％

Question

我需要在顶部创建一个黑色“条形图”。黑色条纹必须是浏览器可以达到的最大高度的10％。我需要锁定条带以允许页面滚动并保持页面上的栏。

这与youtube顶栏类似。

我试过了：

.Header {
position:fixed;
display: flex;
top:0;
left:0;
width:100%;
height: 10%;
background-color:#333333;
}

但这让我有10％的实际最大尺寸，如果我拉伸窗户高度尺寸发生变化，我需要锁定最大尺寸的10％我可以达到

Answer 1

我建议使用媒体查询来确定固定高度，以避免设备之间出现扭曲（请参阅https://css-tricks.com/snippets/css/media-queries-for-standard-devices/）。

但是，如果你坚持将它设置为页面加载高度的10％，最简单的方法是使用jQuery：

$(document).ready(function () {
    $(".bar").height($(window).height()*0.1);
});

请参见此处：https://jsfiddle.net/61hvr079/

Answer 2

你看过How to make the Navigation bar not move when window scrolled down CSS?了吗？他们建议使用位置：绝对可以在手机上更好地观看。

Answer 3

如果您有一个 .bar { width: 100vw; height: 10vh; background-color: black; position: fixed; top: 0; left: 0; } ，那么CSS将获得一个全宽，固定位置的黑色条，它的视图高度为10％：

void