title: Items will not fill page and become responsive when zooming out
body: <p>When I zoom out in my browser, the items in <code>#workspaceMain</code> like <code>#pagename</code>, <code>#toolbar</code>, #content and #tabs will not fill the remainder of the screen space in #workspaceMain even though I have set all widths to 100%. The <code>#workspaceMain</code> width has been set to 70% to accommodate for the <code>sideBar #workspaceSide</code> on the right.</p>
  
  <p>You can see when the zoom is set to 100%, it looks completely normal, when the zoom is set at 75% for example, the items will not fill the remainder white space.</p>
  
  <p>How would I be able to fix this error.</p>
  
  <p><a href="https://i.stack.imgur.com/1it7D.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1it7D.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/ObTIU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ObTIU.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/*
      ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
  */
  
  html &gt; body {
      height: 100%;
      overflow: hidden;
      font-family: "Trebuchet MS", sans-serif;
  }
  
  #wrapper {
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      position: absolute;
      overflow: hidden;
      background: #FFF;
  }
  
  #navigation {
      height: 100%;
      width: 40px;
      float: left;
      position: relative;
      background: #1B315E;
  }
  
  #navigation &gt; a {
      display: block;
      margin: 12px 0 12px 4px;
      padding: 12px 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      text-align: center;
      font-size: 18pt;
      color: #FFF;
  }
  
  #navigation &gt; a.current {
      background: #FFF;
      color: #1B315E;
  }
  
  #navigation &gt; a:not(.current):hover {
      background: #FFF;
      opacity: 0.75;
      color: #1B315E;
  }
  
  #navigation &gt; .navLinks {
      bottom: 40px;
      position: absolute;
      left: 2px;
  }
  
  #navigation &gt; .navLinks &gt; button {
      margin: 0 0 8px 0;
      cursor: pointer;
      background: none;
      outline: none;
      border: none;
      color: #FFF;
      font-size: 14pt;
  }
  
  .buffer {
      display: block;
      margin: 0 0 120px 0;
  }
  
  #workspaceMain {
      float: left;
      height: 100%;
      width: 70%;
      position: relative;
      border: 2px solid #FFF;
      background: #FFF;
  }
  
  #pagename {
      float: left;
      width: 100%;
      font-size: 14pt;
      color: #1B315E;
      background: #FFF;
  }
  
  #toolbar {
      width: 100%;
      background: #CCC;
      border-bottom: 2px solid #BBB;
  }
  
  #toolbar &gt; .toolLinks {
      cursor: pointer;
      background: none;
      border: none;
      outline: none;
      padding: 4px 4px;
      margin: 0 0 0 4px;
      font-size: 10pt;
      color: #1B315E;
      text-transform: uppercase;
  }
  
  #content {
      position: relative;
      overflow-y: scroll;
      height: 100%;
      width: 100%;
  }
  
  [contenteditable]:focus {
      outline: 0px solid transparent;
  }
  
  .mainHeader {
      text-align: center;
      text-transform: uppercase;
      color: #1B315E;
  }
  
  .gridSet {
      width: 100%;
      font-size: 12pt;
      color: #1B315E;
  }
  
  .gridName {
      text-align: center;
      font-weight: bold;
  }
  
  table, th, td {
      border-collapse: collapse;
      border: 1px solid #1B315E;
  }
  
  table, th {
      background: #1B315E;
      text-align: center;
      color: #FFF;
      width: 50%;
  }
  
  table, tr {
      background: #BBB;
      color: #1B315E;
  }
  
  td {
      text-align: left;
      padding: 12px;
  }
  
  #tabs {
      position: fixed;
      bottom: 0;
      width: 70%;
      height: 30px;
      overflow: hidden;
      background: #CCC;
      border-top: 2px solid #BBB;
  }
  
  #tabs &gt; a {
      float: left;
      display: block;
      padding: 4px 4px;
      margin: 0 0 0 4px;
      text-align: center;
      text-decoration: none;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      font-size: 10pt;
      color: #1B315E;
      text-transform: uppercase;
  }
  
  #tabs &gt; a.current {
      background: #FFF;
      color: #1B315E;
  }
  
  #tabs &gt; a:not(.current):hover {
      background: #FFF;
      opacity: 0.75;
      color: #1B315E;
  }
  
  #workspaceSide {
      margin: 0 0 0 70%;
      height: 100%;
      width: 340px;
      top: 0;
      right: 0;
      float: right;
      position: absolute;
      overflow: hidden;
      background: #1B315E;
  }
  
  #tabsPanel {
      position: fixed;
      float: right;
      right: 0;
      bottom: 0;
      width: 336px;
      height: 30px;
      overflow: hidden;
      background: #CCC;
      border-top: 2px solid #BBB;
  }
  
  #tabsPanel &gt; button {
      cursor: pointer;
      background: none;
      outline: none;
      border: none;
      display: block;
      padding: 4px 8px;
      margin: 0 auto;
      text-align: center;
      text-decoration: none;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      font-size: 10pt;
      color: #1B315E;
  }
  
  #tabsPanel &gt; button.current {
      background: #FFF;
      color: #1B315E;
  }
  
  .infoPanel {
      width: 336px;
      height: calc(100vh - 32px);
      float: right;
      position: relative;
      right: 0;
      top: 0;
      overflow: hidden;
  }
  
  .infoPanel &gt; iframe {
      width: 100%;
      height: calc(100vh - 32px);
      top: 0;
      right: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;!--
      ~ Copyright (c) Summit Learning Management System (made by students, for students). 2019.
  --&gt;
  &lt;html lang="en-AU"&gt;
  &lt;head&gt;
      &lt;title&gt;Welcome &amp;#8212; Summit&lt;/title&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"&gt;
      &lt;link rel="stylesheet" href="../style.css" type="text/css"&gt; &lt;!-- Internal Stylesheet --&gt;
      &lt;script src="https://kit.fontawesome.com/1de2bd6ce5.js"&gt;&lt;/script&gt; &lt;!-- Font Awesome (PRO) --&gt;
      &lt;/head&gt;
      
      &lt;body&gt;
      &lt;div id="wrapper"&gt;
          
          &lt;!-- Navigation (Side) --&gt;
          &lt;div id="navigation"&gt;
          &lt;div class="buffer"&gt;&lt;/div&gt;
          &lt;a href="#" class="current" title="Home Workspace"&gt;&lt;i class="fal fa-home"&gt;&lt;/i&gt;&lt;/a&gt; &lt;!-- Home Workspace --&gt;
          &lt;a href="#" title="Learning Workspace"&gt;&lt;i class="fal fa-chalkboard"&gt;&lt;/i&gt;&lt;/a&gt; &lt;!-- Learning Workspace --&gt;
          &lt;a href="#" title="Student Management Workspace"&gt;&lt;i class="fal fa-user"&gt;&lt;/i&gt;&lt;/a&gt; &lt;!-- Student Management Workspace --&gt;
          &lt;a href="#" title="Administration Workspace"&gt;&lt;i class="fal fa-cog"&gt;&lt;/i&gt;&lt;/a&gt; &lt;!-- Administration Workspace --&gt;
          &lt;div class="navLinks"&gt;
          &lt;button title="Quick Links"&gt;&lt;i class="fal fa-bookmark"&gt;&lt;/i&gt;&lt;/button&gt; &lt;!-- Quick Links --&gt;
          &lt;button title="Sign Out"&gt;&lt;i class="fal fa-sign-out-alt"&gt;&lt;/i&gt;&lt;/button&gt; &lt;!-- Sign Out --&gt;
          &lt;/div&gt;
          &lt;/div&gt;
          
          &lt;!-- Workspace (Main) --&gt;
          &lt;div id="workspaceMain"&gt;
              
              &lt;!-- Name of Page --&gt;
              &lt;div id="pagename"&gt;&lt;i class="fal fa-door-open"&gt;&lt;/i&gt; Welcome&lt;/div&gt;
              
              &lt;!-- Toolbar --&gt;
              &lt;div id="toolbar"&gt;
              &lt;button class="toolLinks" title="Save Changes"&gt;&lt;i class="fal fa-save"&gt;&lt;/i&gt; Save&lt;/button&gt; &lt;!-- Save --&gt;
              &lt;button class="toolLinks" title="Print This Page"&gt;&lt;i class="fal fa-print"&gt;&lt;/i&gt; Print&lt;/button&gt; &lt;!-- Print --&gt;
              &lt;/div&gt;
              
              &lt;!-- Main Content --&gt;
              &lt;div id="content"&gt;
                  
                  &lt;!-- Weekly Outline (Table) --&gt;
                  &lt;h3 class="mainHeader" contenteditable="true"&gt;School&lt;/h3&gt;
                  &lt;table class="gridSet"&gt;
                  &lt;caption class="gridName" contenteditable="true"&gt;Weekly Outline&lt;/caption&gt;
                  
                  &lt;tr&gt;&lt;th&gt;Date&lt;/th&gt;&lt;th&gt;Outline&lt;/th&gt;&lt;/tr&gt; &lt;!-- Column Categories --&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  
                  &lt;/table&gt;
              
              &lt;/div&gt;
          
              &lt;!-- Navigation (Bottom) --&gt;
              &lt;div id="tabs"&gt;
              &lt;a href="#" title="Notices"&gt;&lt;i class="fal fa-newspaper"&gt;&lt;/i&gt; Notices&lt;/a&gt; &lt;!-- Notices --&gt;
              &lt;a href="#" title="Dashboard"&gt;&lt;i class="fal fa-chart-line"&gt;&lt;/i&gt; Dashboard&lt;/a&gt; &lt;!-- Dashboard --&gt;
              &lt;a href="#" title="Timetable"&gt;&lt;i class="fal fa-calendar-alt"&gt;&lt;/i&gt; Timetable&lt;/a&gt; &lt;!-- Timetable --&gt;
              &lt;a href="#" class="current" title="Welcome"&gt;&lt;i class="fal fa-door-open"&gt;&lt;/i&gt; Welcome&lt;/a&gt; &lt;!-- Welcome --&gt;
              &lt;/div&gt;
              
          &lt;/div&gt;
          
          &lt;!-- Workspace (Side) --&gt;
          &lt;div id="workspaceSide"&gt;
          
              &lt;!-- Panel Tabs (Bottom) --&gt;
              &lt;div id="tabsPanel"&gt;
              &lt;button class="current" title="Summit News"&gt;&lt;i class="fal fa-newspaper"&gt;&lt;/i&gt;&lt;/button&gt; &lt;!-- Summit News --&gt;
              &lt;/div&gt;
              
              &lt;!-- Panel Content (News Only - Amend CSS and JS when other Tabs are added to the Bottom Panel Navigation) --&gt;
              &lt;div class="infoPanel"&gt;&lt;/div&gt; &lt;!-- Summit News iFrame (used to update across all pages automatically) --&gt;
          
          &lt;/div&gt;
          
          &lt;/div&gt;
      &lt;/body&gt;    
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks</p>