Question

我正在制作一个单页滚动网站，分为五个部分，每个部分都有一个简单的平铺背景。为了更高的屏幕，我正在计算视口高度，然后为这些部分添加最小高度，如下所示：

$('section').css({'min-height': viewportHeight + 'px'});

如果我希望标准填充（顶部和底部）为100px，我可以在CSS中设置并从上面的最小高度函数中减去200，但是我想要做的是检查是否每个部分的高度小于视口高度减去200px（标准填充），如果是（这意味着它下面会有很多额外的空间），有条件地应用填充，这是视口高度的一半减去部分的高度。这是我想要描述的内容，但你必须原谅我的jQuery无能：

$('.home-top,.home-menu,.home-gallery,.home-press,.home-info').each(function(){
    if(($(this).height) < (viewportHeight - 200)) {
        $(this).css({'padding': (viewportHeight - $(this).height())/2 + 'px ' + 0 'px'})
    } else {
        $(this).css({'padding': (100 + 'px ' + 0 'px'})
    }
});

例如，如果视口高度为1000像素而特定部分仅为250像素，那么填充将为（1000 - 内容高度）/ 2或“填充：350px 0”。任何与此标准不匹配的高分区都会得到“填充：100px 0”。

不确定这是否有意义，但是，基本上，我只是试图在设置最小高度时垂直居中各部分内的动态高度内容，以便即使最短部分的背景仍然适合访客屏幕的整个高度。谢谢！

根据内容和视口高度动态应用节填充

0 个答案: