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%; }

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

当然，如果你有一个页脚，你将不得不平衡高度，以弥补页脚的空间，例如#full-slider-wrapper { height:90%; }。

Answer 2

这样的情况非常适合让所有人保持绝对位置，但是将所有四个位置命名。例如：

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

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

使用jQuery实现100％Div高度

2 个答案: