Question

我试图动态调整部分网页的大小，但该部分只会保持增长，即使窗口的高度减少了。所以我记录了身高并得到了一些奇怪的东西。

这是应该调整大小的功能（这个想法是这个类的三个部分中的每个部分应该占据整个屏幕，迫使用户向下滚动以进入下一个部分）：

function set_section_min_height(){
    var newHeight = jQuery(window).height();
    console.log("Window: " + newHeight);
    console.log("Section: " + jQuery(".pgsc_frontpage_section").height());
    if(newHeight > jQuery(".pgsc_frontpage_section").height()){
        jQuery(".pgsc_frontpage_section").height(newHeight);
    }
}

当文档准备好并且每次调整大小时调用该函数：

jQuery(document).ready(function(){set_section_min_height()});
jQuery(window).resize(function(){set_section_min_height()});

这是减少窗口高度

后的日志

Window: 972
Section: 150
Window: 3356
Section: 972
Window: 10508
Section: 3356
Window: 31964
Section: 10508
Window: 96332
...

直到我得到：

Window: 33554431
Section: 33554428

Answer 1

根据您描述的用例，您可能不需要（或想要）jQuery。 CSS单元vh可以很好地为您服务。

.pgsc_frontpage_section {
  height: 100vh;
}

这会将div的高度设置为屏幕的整个高度。

Answer 2

您将截面的高度设置为窗口的高度。通过这样做，部分和窗口都增长。通过反复这样做，它总是在增长。

如果要使用窗口的完整大小，请使用CSS：

height: 100%;
width: 100%;

或者：

 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;

如果您只想使用高度：

height: 100%;

或者：

position: absolute;
top: 0;
bottom: 0;

Answer 3

是。你为什么期望它不会增长？

每当你增加子项目的高度时，在它之外的东西不会改变它的大小，所以总的大小会增加。你会永远重复它。

$（窗口）。身高不断增长

3 个答案: