html - 具有百分比高度的不可收缩的 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';