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

我对JavaScript和jQuery非常陌生，可能犯了一个简单的错误，请耐心等待。根据窗口高度的百分比设置CSS

我有填充窗口高度一个div，但我想我的H1元素是窗口高度下的页面（填充）

$(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'); 
    }; 
});

编辑的28％：在末尾添加的PX码提前的ajustAmt

感谢您的帮助

来源

2016-07-14 Fin Turner

您可以使用CSS：'高度：28vh' - VH =视图高度和28vh意味着当前视图高度的28％。否则，您需要通过在setHeight函数外添加'var windowHeight ='';'来确保您的'windowHeight'变量是全局声明的。 – user3154108

你可以实现你想要的，如果你申请的高度只使用CSS效果：100％为HTML和body标签。显然，与类“全屏”在div必须是身体的直接儿童或高度的另一元素的儿童：100％，儿童身体的

html, 
 
body { 
 
    height: 100%; 
 
} 
 

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

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

来源

2016-07-14 13:20:55 therealbischero

啊，谢谢，一旦它让我回答，我会标记为答案 –

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

.fullscreen { 
    padding-top: 28vh; 
}

例子中看到：https://jsfiddle.net/zjkog9r3

来源

2016-07-14 13:34:47 RandomInt

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

回答

相关问题