100% 使用 jQuery 的 div 高度答案

【问题标题】：100% Div height with jQuery100% 使用 jQuery 的 div 高度
【发布时间】：2017-08-12 00:40:51
【问题描述】：

我在将我的 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 不是很精通，每当我尝试实现上述或类似的东西时，我的内容就会消失。

提前感谢您的帮助！

【问题讨论】：

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

标签： jquery html height css

【解决方案1】：

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

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

还将height:100% 添加到#full-slider-wrapper 的所有其他祖先（如果有）。

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

【讨论】：

我试过了，但是内容没有出现。我刚刚得到了页眉和页脚。
请提供一个小提琴来演示这个问题，否则很难调试你的页面。如果您为所有具有 % height 的子元素设置了定义的高度，它应该可以正常工作。

【解决方案2】：

像这样的情况非常适合将所有位置设为绝对位置，但要命名所有四个位置。示例：

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

这个特定的将强制 $full-slider 到其父级的边缘，但逻辑适用于所有内容。想要 50px 的页脚高度？做底部：50px。根据需要进行更改。

【讨论】：

我可以调整“顶部”以考虑我的页眉，但调整“底部”不会影响页脚相对于内容的位置。页脚卡在页面中间，内容覆盖它。

【解决方案3】：

试试这个：

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

或者这个：

.element_class{
   height:100vh;
}

【讨论】：