根据 Window 高度的百分比设置 CSS

Question

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

我有一个 div 填充 window 高度，但我希望我的 h1 元素是页面下方 window 高度的 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 和 class "fullscreen" 必须是 body 的直接子代或高度为 100% 的另一个元素的子代和 body

的子代

html,
body {
  height: 100%;
}

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

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

Answer 2

只需使用 "vh" 单位作为 window 高度的 1/100

.fullscreen {
    padding-top: 28vh;
}

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

根据 Window 高度的百分比设置 CSS

Setting CSS based on a Percentage of Window Height

javascript

css

jquery

height

percentage