jQuery的Div高度为100％

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

除非所有父母（祖先）都定义了高度，否则百分比高度将不起作用，因此请添加：

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

如果#full-slider-wrapper所有其他祖先都增加了height:100% 。

当然，如果您有页脚，则必须平衡高度以增加页脚的空间，例如#full-slider-wrapper { height:90%; } #full-slider-wrapper { height:90%; } 。

Answer 2

这样的情况对于将所有位置都设为绝对位置非常有用，但要对所有四个位置都进行命名。 例：

#full-slider {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

这个特殊的将强制$ full-slider到达其父级的边缘，但是逻辑适用于所有事物。 希望页脚高度为50px？ 做底：50px。 根据需要进行更改。

Answer 3

尝试这个：

$('element').css('height','100vh');

或这个：

.element_class{
   height:100vh;
}