javascript - 给 div 100% 浏览器窗口的高度

Question

我合并了morphsearch与 google search现在可以对我的网站进行自定义搜索。然而，变形搜索在调用时拒绝占据 100% 的窗口高度。我的 HTML..

<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问题的一个例子website (点击红拳即可查看搜索)。我尝试过 100vh，但没有成功...非常感谢。

Answer 1

您可以通过多种方式做到这一点:

CSS 1

您将 #morphsearch 位置设置为绝对位置，确保 #morphsearch 没有父级，如果有，请确保它们没有相对、绝对或固定位置。

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

CSS 2

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