不可收缩的Div，高度百分比

Question

在我正在进行的项目中，我试图将页面标题高度设置为屏幕的5％。显然这是用height: 5%;完成的，但是，我需要标题始终保持在整个屏幕的5％。这意味着如果我缩小浏览器窗口，标题div也不会按比例缩小。我需要它保持相同的大小，但需要用初始百分比设置大小。我用来参考的网站是github.com，因为即使浏览器窗口收缩，它们的标题也会保持一个大小。 Flickr.com是我在标题中寻找的另一个例子。我尝试使用min-height: XXpx;（用数字代替＆＃39; x＆＃39;但这样做无效）。

Answer 1

在页面加载后使用JavaScript来计算窗口高度的5％＆amp;将其作为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;}