JSFiddle - React, Tailwind, and code Playground
HTML
<div id="pusher">
<input type="search">
<button id="but"></button>
<div id="advanced_search_div_body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pharetra, orci a vestibulum euismod, elit erat elementum magna, nec bibendum metus dui ac urna. Vestibulum vel sem nunc. In mattis, tortor bibendum rutrum congue, lorem leo fermentum lectus, sit amet feugiat ligula diam id nibh. Fusce lorem lectus, porttitor eget purus ut, cursus tristique tellus. Duis suscipit leo vel neque euismod pretium. Nulla facilisi. In tincidunt velit nec metus porttitor eleifend. Maecenas et dapibus urna. Curabitur rhoncus augue a aliquet luctus. Suspendisse ut tincidunt ipsum. Nulla quis lorem leo. Integer scelerisque risus elit, non imperdiet magna pulvinar in. Cras vel magna feugiat, ullamcorper dui nec, pellentesque dolor. Sed molestie malesuada nulla eu vehicula. Vestibulum libero risus, blandit semper neque ut, commodo interdum ligula. Vestibulum pharetra tempor tellus, vitae hendrerit purus porta sit amet. Vestibulum sed tellus ac diam pellentesque fringilla sit amet sit amet tortor. Etiam auctor massa eu luctus mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus eu molestie orci. In metus eros, adipiscing a urna id, feugiat blandit mauris. Morbi vitae nisi eget nulla dignissim dignissim sit amet nec nibh. Duis tellus augue, lacinia elementum malesuada id, egestas non libero. Suspendisse elementum leo eu augue condimentum, non venenatis nulla faucibus. Duis bibendum scelerisque gravida. Curabitur et libero mauris. Nam cursus mi massa, non ultrices dolor facilisis a. Donec lacinia mi nisl, non feugiat nisi consectetur quis. Nulla imperdiet id turpis eu facilisis. Fusce porttitor at turpis nec varius. Morbi interdum est id neque tincidunt, tincidunt luctus tellus viverra. Quisque laoreet scelerisque eros non porta. Aenean tortor diam, tempus id elit tempus, rutrum consequat arcu. Donec porttitor, nibh bibendum...
CSS
body,html{
height:100%;
display:block;
}
#pusher{
display:block;
min-height:100%;
}
#advanced_search_div_body {
height: 100%;
width: 817px;
margin: 0 auto;
padding: 0;
display: table;
background-color: white;
display:none;
margin-bottom:80px;
}
#foot {
padding: 30px 0px;
background-color: black;
clear: both;
width: 100%;
overflow: hidden;
z-index: 2;
color:#fff;
margin-top:-80px;
}
#but {
background-image:url(http://www.brandladder.nl/img/arrow_down.png);
background-size: 100% 100%;
display:inline-block;
width:20px;
height:20px;
}
JavaScript
document.getElementById('but').onclick = function () {
document.getElementById('advanced_search_div_body').style.display = 'table'
}