$(window).height 不断增长答案

【问题标题】：$(window).height keeps growing$(window).height 不断增长
【发布时间】：2016-02-17 00:26:48
【问题描述】：

我正在尝试动态调整网页的一部分，但该部分只会继续增长，即使窗口的高度降低了也是如此。所以我记录了身高并得到了一些奇怪的东西。

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

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

【问题讨论】：

你的函数 set_section_min_height() 是怎么调用的？
我编辑了问题以添加调用
那么当你设置高度时，会不会降低内容使窗口高度变大？
我曾经遇到过类似的问题。修复它并在这里发布我的解决方案，希望它可以帮助你。 stackoverflow.com/questions/33926391/…

标签： javascript jquery html css

【解决方案1】：

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

.pgsc_frontpage_section {
  height: 100vh;
}

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

【讨论】：

如果该部分的内容更大会怎样？我想确保我不会失去任何东西。
@frollo 在这种情况下你可以设置min-height: 100vh;

【解决方案2】：

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

如果您想使用全尺寸的窗口，请使用 CSS：

height: 100%;
width: 100%;

或者：

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

如果你只想要高度使用：

height: 100%;

或者：

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

【讨论】：

【解决方案3】：

是的。为什么你认为它不会增长？

每次增加子项的高度时，超出它的范围不会改变它的大小，因此总大小会增加。然后你永远重复它。

【讨论】：

这是评论，不是答案。
@Blazemonger，这就是答案。