具有百分比高度的不可收缩 Div答案

【问题标题】：Unshrinkable Div with percent height具有百分比高度的不可收缩 Div
【发布时间】：2015-04-05 23:21:27
【问题描述】：

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

【问题讨论】：

标签： html css height percentage

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

例子

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

【讨论】：