jquery - 使用 jQuery 的 100% Div 高度

Question

我在将 Div 设置为窗口的 100% 时遇到了一些问题，希望得到一些帮助来解决这个问题。

这是缩写的 html...

<div id="full-slider-wrapper">
  <div id="full-slider">
    <div class="slide-panel active">
       CONTENT
    </div>
  </div>
</div>

这是相关的 CSS:

/*SLIDER
===================================
*/

#full-slider-wrapper {
    overflow: hidden;
}

#full-slider {
    position: relative;
    width: auto;
    min-height: 1250px;
    margin: 0 auto;
}

#full-slider .slide-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: auto;
    visibility: hidden;
}

#full-slider .slide-panel.active {
    visibility: visible;
     } 

我一直在使用 min-height: 1250px;作为解决方法，但我使用的是 SKELETON 主题，当我调整窗口大小时，内容会缩小，并且在内容和页脚之间留下大量空白。

我知道有很多类似的问题被问到，但我似乎无法找到任何解决方案。看来我最好的选择是使用如下所示的一些 jQuery:

$(function() {
    $(window).resize(function() {
        $('div:full-slider').height($(window).height() - $('div:full-slider').offset().top);
    });
    $(window).resize();
});

不幸的是，我对 jQuery 不是很精通，每当我尝试实现上述或类似的东西时，我的内容就会消失。

在此先感谢您的帮助!

Answer 1

除非所有 parent (祖先)都定义了高度，否则百分比高度将不起作用，因此添加:

html, body, #full-slider-wrapper, #full-slider { height:100%; }

同时将 height:100% 添加到 #full-slider-wrapper 的所有其他祖先(如果有的话)。

当然，如果您有页脚，则必须平衡高度以为页脚腾出空间，例如#full-slider-wrapper { 高度:90%； 。