强制视差部分延伸到页面底部

Question

我有一个单页的视差网站 - 我试图强制每个视差部分延伸到页面的底部，这样你就看不到下一部分，除非你点击它 - 有一个简单的方法这样做？

目前我将以下代码放在标题

中

<script type="text/javascript">
var imageFit = function() {
   windowHeight = $(window).height();
   $('.parallax-section').css('min-height', windowHeight).refresh();
};
</script>

CSS中的以下内容

.parallax-section {
    height: 100%;
    clear: both !important;
    }

.min-height {
    min-height: 100%; 
    }

但它并没有延伸......任何想法我做错了什么？ 谢谢

Answer 1

根据您需要支持的浏览器，您可以使用较新的vh单位，这些单位相对于浏览器的高度而非内容，但您的javascript应该有效：

.parallax-section {
    min-height: 100vh;
}