給 div 100% 瀏覽器窗口的高度

Question

我將morphsearch與google 搜索結合起來，現在對我的網站進行了自定義搜索。 然而，變形搜索在調用時拒絕占據 100% 的窗口高度。 我的..

 <div id="morphsearch" class="morphsearch"> <form id="searchForm" class="morphsearch-form" method="post"> <input id="s" class="morphsearch-input" type="search" placeholder="Search Dundaah..."/> <input class="morphsearch-submit" type="submit" value="Submit" id="submitButton" /> </form> <div id="resultsDiv" class="morphsearch-content2"></div> <span class="morphsearch-close"></span> <span class="morphsearch-close2"></span> </div>

css、 component.css 、js script2.js和search.js的鏈接是問題網站的一個例子（點擊紅拳查看搜索）。 我試過 100vh，沒有用……非常感謝。

Answer 1

您可以通過以下幾種方式執行此操作：

CSS 1

您將#morphsearch 位置設置為絕對位置，確保#morphsearch 沒有父母，如果他確實確保他們沒有相對、絕對或固定位置。

#morphsearch { position: absolute; left:0; top:0; width:100%; height:100%;}

CSS 2

將min-height和height 100%設置min-height height 100%為html和body

body, html {
  width: 100%;
  height: 100%;
  min-height: 100%;
}

Javascript/jQuery

$('#morphsearch').css({
    'width': $(window).width(), 'height': $(window).height()
});