根据窗口高度的百分比设置 CSS答案

【问题标题】：Setting CSS based on a Percentage of Window Height根据窗口高度的百分比设置 CSS
【发布时间】：2016-11-17 10:27:03
【问题描述】：

我是 JavaScript 和 jQuery 的新手，可能犯了一个简单的错误，所以请多多包涵。

我有一个填充窗口高度的 div，但我希望我的 h1 元素是页面下方窗口高度的 28%（填充）

$(document).ready(function() {
  function setHeight() {
    windowHeight = $(window).innerHeight();
    $('.fullscreen').css('min-height', windowHeight);
  };

function imageAjust() {
  var ajustAmt = windowHeight * 28 / 100;
  $('.fullscreen').css('padding-top', ajustAmt + 'px');
  };
});

编辑：在 ajustAmt 末尾添加 px 代码

提前感谢您的帮助

【问题讨论】：

您可以使用 CSS：height: 28vh - vh = 视图高度，28vh 表示当前视图高度的 28%。否则，您需要通过在 setHeight 函数之外添加 var windowHeight = ''; 来确保您的 windowHeight 变量是全局声明的。

标签： javascript jquery css height percentage

【解决方案1】：

只需使用“vh”单位作为窗口高度的 1/100

.fullscreen {
    padding-top: 28vh;
}

示例见：https://jsfiddle.net/zjkog9r3

【讨论】：

【解决方案2】：

如果你将 height:100% 应用于 html 和 body 标签，你可以只使用 css 来达到你想要的效果。显然，具有“全屏”类的 div 必须是 body 的直接子级或具有 height: 100% 和 body 的子级的另一个元素的子级

html,
body {
  height: 100%;
}

.fullscreen{
  height: 100%;
  padding-top: 28%;
}

&lt;div class="fullscreen"&gt;&lt;/div&gt;

【讨论】：