百分比高度的非缩水Div

Question

在我正在处理的一个项目中，我试图让页面的标题高度为屏幕的5％。很明显，这是通过height: 5%;完成的，但是，我需要标题始终保持在整个屏幕的5％。这意味着如果我缩小浏览器窗口，则标题div也不会按比例缩小。我需要它保持相同的尺寸，但尺寸需要设置初始百分比。我用作参考的网站是github.com，因为即使浏览器窗口缩小，它们的标题也保持一个大小。 Flickr.com是我在标题中寻找的另一个例子。我曾尝试使用min-height: XXpx;（用数字替换'x'），但那不起作用。

Answer 1

在页面加载后使用JavaScript来计算窗口高度的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;}