javascript - html DIV 不必要地通过浏览器操作调整大小

Question

我使用以下 CSS 创建了一个 html 透明标题栏:

#head-bar{
    position:fixed;
    top: 0px;
    width:100%;
    left:0px;
    min-height:25%;
    z-index:2;
    background-color:#000;
    background: rgba(0, 0, 0, 0.5);
}

问题:

如果我启用了一些浏览器工具栏，这个 div 会降低它的高度。当我启用 firebug 面板或 firefox 的控制台时，也会发生同样的事情。 我试图通过使用 jquery 动态设置这个 div 的高度来克服这个问题。

$(window).height() * 25 / 100; // unsuccessful attempt

如何让这个 div 保持固定状态？能否请您赐教。

Answer 1

百分比单位是为了在浏览器状态方面引入外观的灵 active 。 如果必须始终保持高度不变，请提供以 px/pt 为单位的高度或更好地使用“em”单位。由于您使用百分比，每次浏览器高度变化时，div 的高度也会根据定义的 CSS 规则 (25%) 进行修改。