title: How to get div to cover entire screen (& also be scrollable)?
body: <h2>Problem</h2>
  <p>I have this <code>login.php</code> screen and <code>addphoto.php</code> screen that I want to cover the entire page. So what I did was:</p>
  <pre><code> .login-screen, .form-screen {
      position: fixed;
      top: 0;
      left: 0;
      display: none;
      z-index: 1;
      height: 100vh;
      width: 100vw;
  }
  </code></pre>
  <p>But on the <code>login.php</code> screen there is still a sliver of white at the bottom. And on the <code>addphoto.php</code> screen I can't scroll down (b/c the form elements are longer than the screen height. <a href="https://im3.ezgif.com/tmp/ezgif-3-13521baab7.gif" rel="nofollow noreferrer">See animation of problem here</a></p>
  <p>If anyone could help me so that these screens would behave the way I want them to that would be great!</p>
  <p><a href="https://i.stack.imgur.com/HY49M.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HY49M.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/A7glR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A7glR.png" alt="enter image description here" /></a></p>
  <h3>Note</h3>
  <p>I've already looked at <a href="https://stackoverflow.com/questions/28071170/how-to-make-a-div-full-screen-and-scrollable">this post</a>. However, although it makes the div scrollable, I can still scroll past the <code>addphoto.php</code> or <code>login.php</code> page and see the screen below. <a href="https://im3.ezgif.com/tmp/ezgif-3-4de9639cc5.gif" rel="nofollow noreferrer">See animation here</a></p>
  <h2>Code</h2>
  <p><em>photos.php</em></p>
  <pre><code>&lt;?php
      $name = &quot;Photos&quot;;
      require_once('config.php');
  
      $sql = 'SELECT * FROM Image;';
      require_once(&quot;nav.php&quot;);
      require_once(&quot;php/header.php&quot;);
      require_once(&quot;php/grid.php&quot;);
      require_once(&quot;php/footer.php&quot;);
      require_once('login.php');
      require_once('addphoto.php');
  ?&gt;
  </code></pre>
  <p><em>config.php</em></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
      &lt;title&gt;
          &lt;?php echo &quot;$name&quot; ?&gt;
      &lt;/title&gt;
      &lt;meta charset=&quot;utf-8&quot;&gt;
      &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
      &lt;!--Styling--&gt;
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/main.css&quot; /&gt;
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/grid.css&quot; /&gt;
      &lt;link type=&quot;text/css&quot; rel=&quot;stylesheet&quot; href=&quot;css/form.css&quot; /&gt;
  &lt;?php
      $nameLowercased = strtolower($name);
      echo &quot;&lt;link type='text/css' rel='stylesheet' href='css/$nameLowercased.css'/&gt;&quot;;
  
  ?&gt;
      &lt;!--Custom icon--&gt;
      &lt;link href=&quot;https://file.myfontastic.com/fNQ9F99nd88vQm96ESUaLW/icons.css&quot; rel=&quot;stylesheet&quot; /&gt;
      &lt;!-- jQuery library --&gt;
      &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.js&quot;&gt;&lt;/script&gt;
      &lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.js&quot;&gt;&lt;/script&gt;
      &lt;!--Javascript--&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;js/main.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  <p><em>grid.php</em></p>
  <pre><code>&lt;div class=&quot;grid&quot;&gt;
      &lt;?php
          while ($row = $result-&gt;fetch_assoc()) {
             $printGridFor[$name]($row);
          }
      ?&gt;
  &lt;/div&gt;
  &lt;button class=&quot;add&quot;&gt;&lt;span class=&quot;icon-plus&quot;&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  <p><em>login.php</em></p>
  <pre><code>&lt;div class=&quot;form-screen&quot;&gt;
      &lt;button class=&quot;close&quot; id=&quot;closeLogin&quot;&gt;&lt;span class=&quot;icon-x&quot;&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;form action=&quot;&quot; method=&quot;post&quot;&gt;
          &lt;div class=&quot;login-wrapper&quot;&gt;
              &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;Username&quot;&gt;
              &lt;input type=&quot;text&quot; name=&quot;password&quot; placeholder=&quot;Password&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;field submit&quot; name=&quot;submit&quot; value=&quot;submit&quot;&gt;Submit&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>addphoto.php</em></p>
  <pre><code>&lt;div class=&quot;form-screen&quot;&gt;
      &lt;button class=&quot;close&quot; id=&quot;closeForm&quot;&gt;&lt;span class=&quot;icon-x&quot;&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;form method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
          &lt;div class=&quot;form-wrapper&quot;&gt;
              &lt;h1&gt;Add Photo&lt;/h1&gt;
              &lt;div class=&quot;box&quot;&gt;
                  &lt;input type=&quot;file&quot; name=&quot;file[]&quot; id=&quot;file&quot; class=&quot;inputfile&quot; data-multiple-caption=&quot;{count} files selected&quot; multiple /&gt;
                  &lt;label for=&quot;file&quot;&gt;
                      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;17&quot; viewBox=&quot;0 0 20 17&quot;&gt;
                          &lt;path d=&quot;M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z&quot; /&gt; &lt;/svg&gt; &lt;span&gt;Choose a file&amp;hellip;&lt;/span&gt; &lt;/label&gt;
              &lt;/div&gt;
              &lt;select name=&quot;image-album&quot; class=&quot;col&quot;&gt;
                  &lt;option value=&quot;&quot; selected&gt;Add to album&lt;/option&gt;
                  &lt;option value=&quot;1&quot;&gt;Beauty Gurus&lt;/option&gt;
                  &lt;option value=&quot;2&quot;&gt;Cute Food&lt;/option&gt;
              &lt;/select&gt;
              &lt;input type=&quot;text&quot; name=&quot;photo-title&quot; placeholder=&quot;Title&quot; required&gt;
              &lt;input type=&quot;text&quot; name=&quot;date-created&quot; class=&quot;date&quot; placeholder=&quot;Date Created&quot; required&gt;
              &lt;input type=&quot;text&quot; name=&quot;caption&quot; placeholder=&quot;Caption&quot;&gt;
              &lt;input type=&quot;text&quot; name=&quot;credt&quot; placeholder=&quot;Credit*&quot;&gt;
              &lt;button type=&quot;submit&quot; class=&quot;field submit&quot; name=&quot;submit&quot; value=&quot;submit&quot;&gt;Upload Photo&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  <p><em>form.css</em></p>
  <pre><code>/*General styling*/
  
  button:focus,
  .inputfile:focus + label,
  select:focus,
  input:focus {
      outline: white auto 5px;
  }
  
  /*Login styling*/
  .login-screen, .form-screen {
      position: fixed;
      top: 0;
      left: 0;
      display: none;
      z-index: 1;
      height: 100vh;
      width: 100vw;
      background: #3472FF;
      color: white;
      font-family: 'Roboto', 'sans-serif';
  }
  
  .close {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 2em;
      color: white;
  }
  
  .close:hover {
      color: #d8d8d8;
  }
  
  .form-wrapper {
      padding-top: 5%;
      padding-bottom: 5%;
  }
  
  .form-wrapper h1 {
      text-transform: uppercase;
      font-weight: 500;
      text-align: center;
      font-size: 3em;
  }
  
  /*Login styling*/
  .login-wrapper {
      margin-top: 15%;
      margin-bottom: 15%;
  }
  
  
  /*Form input elemnts styling*/
  
  input[type=&quot;text&quot;],
  .submit,
  select {
      display: block;
      margin: 0 auto;
  }
  
  input[type=&quot;text&quot;] {
      cursor: text;
  }
  
  select {
      cursor: pointer;
      margin-bottom: 40px;
  /*
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
  */
  }
  
  input[type=&quot;text&quot;],
  select {
      border: none;
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      color: #3472FF;
      font-size: 2em;
      padding: 20px 20px 20px 20px;
      margin-bottom: 40px;
      width: 60%;
  }
  
  input[type=&quot;text&quot;]::-webkit-input-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      color: #3472FF;
      font-size: 1em;
  }
  
  input[type=&quot;text&quot;]:-ms-input-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #3472FF;
      font-size: 1em;
  }
  
  input[type=&quot;text&quot;]:-moz-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #3472FF;
      font-size: 1em;
  }
  
  input[type=&quot;text&quot;]::-moz-placeholder {
      font-family: 'Roboto', sans-serif;
      font-weight: 400;
      color: #3472FF;
      font-size: 1em;
  }
  
  .submit:hover {
      background-color: #d8d8d8;
  }
  
  .submit {
      background-color: white;
      color: #3472FF;
      font-size: 2em;
      text-transform: uppercase;
      padding: 20px 20px 20px 20px;
      border-radius: 7px;
      border: none;
  }
  
  
  /*File upload styling*/
  
  .box {
      text-align: center;
      margin-bottom: 35px;
  }
  
  .inputfile {
      width: 0.1px;
      height: 0.1px;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
  }
  
  .inputfile + label {
      max-width: 80%;
      font-size: 1.4em;
      font-weight: 500;
      text-transform: uppercase;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
      display: inline-block;
      overflow: hidden;
      padding: 20px 20px 20px 20px;
      border-radius: 5px;
  }
  
  .inputfile + label svg {
      width: 1em;
      height: 1em;
      vertical-align: middle;
      fill: currentColor;
      margin-top: -0.25em;
      /* 4px */
      margin-right: 0.25em;
      /* 4px */
  }
  
  .inputfile + label {
      color: #3472FF;
      background-color: white;
  }
  
  .inputfile:focus + label,
  .inputfile.has-focus + label,
  .inputfile + label:hover {
      background-color: #d8d8d8;
  }
  
  
  /*Datepicker styling*/
  
  /*Set datepicker’s width, position it to the center and add drop shadow*/
  .ui-datepicker {
      width: auto;
      height: auto;
      margin: 5px auto 0;
      font: .7em 'Roboto', sans-serif;
      -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
      -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
      box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .10);
      background-color: #fafafb;
  }
  
  /*Remove the default underline decoration from every anchor tag*/
  .ui-datepicker a {
      text-decoration: none;
  }
  
  /*add 100% width for the table, so it will have the same maximum width as the wrapper above (i.e. widith: auto)*/
  .ui-datepicker table {
      width: 100%;
  }
  
  /*style header*/
  .ui-datepicker-header {
      text-transform: uppercase;
      background-color: #fafafb;
      font-size: 1.2em;
      color: #555555;
      font-weight: bold;
      line-height: 30px;
  }
  
  /*center the Month position.*/
  .ui-datepicker-title {
      text-align: center;
  }
  
  /*Set up arrows*/
  .ui-datepicker-prev,
  .ui-datepicker-next {
      display: inline-block;
      width: 30px;
      height: 30px;
      text-align: center;
      cursor: pointer;
      background-repeat: no-repeat;
      line-height: 600%;
      overflow: hidden;
  }
  
  /*Replace the Next and Prev text with the sprite arrow images and adjust arrow position*/
  .ui-datepicker-prev {
      float: left;
      background-position: center 10px;
      background-image: url('../images/arrow_prev.png');
      /*Images created by me (Monica Ong)*/
  }
  
  .ui-datepicker-next {
      float: right;
      background-position: center 10px;
      background-image: url('../images/arrow_next.png')
  }
  
  /*Set colors of day names*/
  .ui-datepicker thead {
      background-color: #efefef;
  }
  
  .ui-datepicker th {
      text-transform: uppercase;
      font-size: .7em;
      padding: 5px 0;
      color: #666666;
  }
  
  /*Style dates*/
  .ui-datepicker tbody td {
      padding: 0;
  }
  
  .ui-datepicker tbody td {
      padding: 0;
  }
  
  /*Style default,  hover, and active state*/
  .ui-datepicker td span,
  .ui-datepicker td a {
      display: inline-block;
      font-weight: bold;
      text-align: center;
      width: 30px;
      height: 30px;
      line-height: 30px;
      color: #666666;
  }
  
  .ui-datepicker-calendar .ui-state-default {
      background: #ededed;
  }
  
  .ui-datepicker-unselectable .ui-state-default {
      background: #f4f4f4;
      color: #949496;
  }
  
  .ui-datepicker-calendar .ui-state-hover {
      background: #f7f7f7;
  }
  
  .ui-datepicker-calendar .ui-state-active {
      background: #666666;
      color: #efefef;
      position: relative;
      margin: -1px;
  }
  
  .ui-datepicker-calendar td:first-child .ui-state-active {
      width: 29px;
      margin-left: 0;
  }
  
  .ui-datepicker-calendar td:last-child .ui-state-active {
      width: 29px;
      margin-right: 0;
  }
  
  .ui-datepicker-calendar tr:last-child .ui-state-active {
      height: 29px;
      margin-bottom: 0;
  }
  </code></pre>
  <p><em>main.js</em></p>
  <pre><code>$(document).ready(function () {
      //Show/Hide edit &amp; delete buttons
      $(&quot;.grid&quot;).on(&quot;mouseenter&quot;, &quot;.grid-square&quot;, function () {
          $(this).find(&quot;.delete&quot;).fadeIn(100);
          $(this).find(&quot;.edit&quot;).fadeIn(100);
      });
      $(&quot;.grid&quot;).on(&quot;mouseleave&quot;, &quot;.grid-square&quot;, function () {
          $(this).find(&quot;.delete&quot;).fadeOut(100);
          $(this).find(&quot;.edit&quot;).fadeOut(100);
      });
  
      //Show/Hide nav bar
      $(&quot;.closeNavBtn&quot;).on(&quot;click&quot;, function () {
          $(&quot;.sidenav&quot;).css(&quot;width&quot;, &quot;0px&quot;);
      });
      $(&quot;.menu&quot;).on(&quot;click&quot;, function () {
          $(&quot;.sidenav&quot;).css(&quot;width&quot;, &quot;250px&quot;);
      });
      $(window).scroll(function (event) {
          if ($(&quot;.sidenav&quot;).width() === 250) {
              $(&quot;.sidenav&quot;).css(&quot;width&quot;, &quot;0vw&quot;);
          }
      });
  
      //Show/Hide login screen
      $(&quot;.login&quot;).on(&quot;click&quot;, function () {
          $(&quot;.login-screen&quot;).fadeIn(300);
      });
      $(&quot;#closeLogin&quot;).on(&quot;click&quot;, function () {
          $(&quot;.login-screen&quot;).fadeOut(300);
      });
  
      //Show/Hide form screen
      $(&quot;.add&quot;).on(&quot;click&quot;, function(){
        $(&quot;.form-screen&quot;).fadeIn(300);
      });
      $(&quot;#closeForm&quot;).on(&quot;click&quot;, function(){
        $(&quot;.form-screen&quot;).fadeOut(300);
      });
      //Customize input label based on file
      var input = document.querySelector('.inputfile');
      customizeInputLabel(input);
  
      //Datepicker
      $(&quot;.date&quot;).datepicker({
          inline: true
          , showOtherMonths: true
          , dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      });
  });
  //customizeInputLabel changes label when select file
  function customizeInputLabel(input) {
      var label = input.nextElementSibling
          , labelVal = label.innerHTML;
      input.addEventListener('change', function (e) {
          var fileName = '';
          if (this.files &amp;&amp; this.files.length &gt; 1) fileName = (this.getAttribute('data-multiple-caption') || '').replace('{count}', this.files.length);
          else fileName = e.target.value.split('\\').pop();
          if (fileName) label.querySelector('span').innerHTML = fileName;
          else label.innerHTML = labelVal;
      })
  }
  </code></pre>