javascript - How do I make a div fixed for Mobile, but on click fill the viewport with scroll -

our customer wants ability fill out "contact us" form on right side of screen next content of page on desktop/tablet.

however in mobile, want div or button on bottom of screen (fixed) clickable user. once clicked, form fill screen , need scroll-able customer can fill out form , submit.

here picture showing issue. notice how if scroll down. amount of div fits in 80vh ever displayed

css

.bottomdiv {     position: fixed !important;      bottom:0px !important;      width: 100% !important; height: 77px;     border-radius: 8px; } 

jquery

    $(window).on("resize load", function () {         var width = $(window).width();         if (width < 600)         {             $('#divcontactsticky').addclass("bottomdiv");             $('#divcontactsticky').on('click', fillscreen);         }         else {             $('#divcontactsticky').removeclass("bottomdiv");             $('#divcontactsticky').unbind("click");         }     });      var fillscreen = function () {         if ($('#divcontactsticky').height == '80vh')         {             $('#divcontactsticky').unbind("click");         }         else {             $('#divcontactsticky').css('height', '80vh');         }      };     function cancelform() {         if ($('#divcontactsticky').height == '80vh') {             $('#divcontactsticky').css('height', '77px');             $('#divcontactsticky').on('click', fillscreen);         }         else {          }     } 

html

<div id="divcontactsticky" class="large-3 right columns float-right">             /// <div> 'contact' portion in blue</div>             <form id="emailform" action="../api/email" method="post">                 <p>name*</p>                 <input id="name" maxlength="25" required />                 <p>company</p>                 <input id="company" maxlength="25" />                 <p>phone</p>                 <input id="phone" maxlength="14" />                 <p>email*</p>                 <input id="email" maxlength="50" required />                 <p>comments/questions*</p>                 <textarea id="emailbody" maxlength="400" required</textarea>                 <input type="reset" value="cancel" onclick="cancelform()" css="button-right" />                 <input type="submit" value="submit" css="button-right" />             </form>     </div> 

you can add style="overflow-y:auto" divcontactsticky. remain of same height mentioned 80vh add scroll div.