不可收缩 Div 百分比高度

Question

在我正在进行的项目中，我试图让页面的 header 高度为屏幕的 5%。显然这是用 height: 5%; 完成的，但是，我需要 header 始终保持在整个屏幕的 5%。这意味着如果我要缩小浏览器 window，header div 也不会按比例缩小。我需要它保持相同的大小，但大小需要设置为初始百分比。我用来参考的一个网站是 github.com，因为即使浏览器 window 缩小了，它们的 header 仍保持原尺寸。 Flickr.com 是我在 header 中寻找的另一个例子。我曾尝试使用 min-height: XXpx;（将 'x' 替换为数字），但效果不佳。

Answer 1

在页面加载后使用 JavaScript 计算 window 高度的 5% 并将其分配给页眉作为其 CSS 高度值。它将覆盖任何设置的 CSS 值。

var h = window.innerHeight * 0.05;
getElementById('your-element-id').style.height = h+'px';

Answer 2

你试过vh（垂直高度）计算了吗？

例子

navbar{
min-height: 5vh;
max-height: xx;}

不可收缩 Div 百分比高度

Unshrinkable Div with percent height

html

css

height

percentage