Html 黑色条纹最大为屏幕最大高度的10%

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

这类似于youtube顶栏

我试过这个：

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

但是这让我有10%的实际最大尺寸，如果我拉伸窗户，高度尺寸改变，我需要锁定我能达到的最大尺寸的10%

你看了吗？他们建议位置：绝对，以便更好地在手机上观看。

如果您有一个

，那么CSS获得全宽、固定位置的黑色条，即视图高度的10%，应该是：

    .bar {
     width: 100vw;
     height: 10vh;
     background-color: black;
     position: fixed;
     top: 0;
     left: 0;
   }

---

我建议使用媒体查询来固定高度，以避免设备间的失真（请参阅）

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

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

---

请参见此处示例：

您尝试了什么？您遇到了什么问题？请分享你的代码。@Shaggy我发布了我的代码，我需要最大尺寸的10%更改

高度：10%至<代码>高度：10vh@adambuchanemissh它不工作，如果我将浏览器窗口拉伸到黑色条纹的大小，那么你希望它是什么的10%吗？你的总页面高度？它不起作用，我需要10%的大小，如果我拉伸窗口，黑色条纹会改变他的大小，我不想，我不确定你所说的10%大小是什么意思，如果不是查看高度。也许您正在寻找几个断点之间的不同固定高度？我正在使用dreamweaver实现流畅且响应迅速的实现，我是jQuery新手，如果有其他断点，我会避免使用它solution@user4789408隐马尔可夫模型。。当然，我还是建议大家一起使用媒体查询来避免这个问题（并且当各种大小的屏幕试图访问您的网站时，可能会避免出现问题，.bar的内容由于动态高度设置而扭曲）。但是，如果您愿意满足于限制div的最大高度，您可以使用max height属性并将其设置为一定数量的px（或者，如果您想将其更改为mobile，甚至可以将其设置为em）