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

Setting CSS based on a Percentage of Window Height

本文关键字：百分比 设置 CSS 高度 窗口      更新时间：2023-09-26

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

提前感谢您的帮助

如果您将

height：100% 应用于 html 和 body 标签，则可以仅使用 css 实现您想要的效果。显然，具有"全屏"类的div 必须是身体的直接子项或具有高度的另一个元素的子项：100% 和身体的孩子

html,
body {
  height: 100%;
}
.fullscreen{
  height: 100%;
  padding-top: 28%;
}
<div class="fullscreen"></div>

相关文章：