1

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

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

如果我希望标准填充（顶部和底部）为 100px，我可以在 CSS 中设置它并从上面的 min-height 函数中减去 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 或“内边距：350 像素 0”。任何不符合此标准的高部分只会得到“填充：100px 0”。

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

4

0 回答 0