0

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

在此先感谢您的帮助！

4

3 回答 3

2

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

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

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

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

于 2013-01-10T21:24:30.167 回答
2

像这样的情况非常适合使所有位置都成为绝对位置，但要命名所有四个位置。例子：

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

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

于 2013-01-10T21:59:23.407 回答
-1

尝试这个：

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

或这个：

.element_class{
   height:100vh;
}
于 2017-08-10T22:36:33.397 回答