不可收縮的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;}