javascript - 根据窗口高度的百分比设置 CSS

Question

我是 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 代码

在此先感谢您的帮助

Answer 1

如果将 height:100% 应用于 html 和 body 标签，则仅使用 css 即可实现所需的效果。显然，类为“全屏”的 div 必须是 body 的直接子元素或高度为 100% 的另一个元素的子元素和 body 的子元素

html,
body {
  height: 100%;
}

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

<div class="fullscreen"></div>