给 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()
});