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