我试图通过一些基本的javascript标记来实现全高介绍性部分。
更详细地:
我得到了一个父DIV元素,该元素充当包装器并应适应整个视口高度。由于某些移动设备不兼容,css“高度:100vh”无法正常工作。因此,我坚持使用此代码。前一阵子效果很好。我没有做任何更改,突然它在一夜之间停止在chrome中工作?!无法正确计算高度。
我附上了我的代码和一些案例的屏幕截图。
我敢肯定你可以帮助我。
先感谢您
Working sample
Chrome bug
$(document).ready(function(){
'use strict';
setInterval( function() {
var windowHeight = $(window).height();
var containerHeight = $("#intro-wrapper > .inner").height();
var navHeight = $("header#main").outerHeight(true);
var border = 20;
var padTop = windowHeight - 20 - (containerHeight+navHeight);
$("#intro-wrapper > .inner").css ({
'padding-top': Math.round(padTop / 2) + 'px',
'padding-bottom': ((padTop / 2)- border) + 'px',
'margin-bottom': border + 'px'
});
}, 0);
});
最佳答案
尝试在CSS中使用height:100vh;
获得全高。