title: How to make a div height adjusted between two divs with Bootstrap
body: <p>I am new to <code>bootstrap</code> and <code>css</code>, however with some code on internet, I was able to create my <code>welcome.jsp</code> page.</p>
  
  <p><strong>What I wanted to do</strong>
  I wanted my main content div in between header and footer. Also I wanted the footer to be in fixed position.</p>
  
  <p><strong>What I achieved</strong>
  I was able to create main div in between header and footer.</p>
  
  <p><strong>problem</strong>
  when I reduce the zoom of my chrome browser, the main div height gets shrink, leaving unnecessary blank space between main div and footer.</p>
  
  <p><strong>without any zoom</strong>
  <a href="https://i.stack.imgur.com/OHCZa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OHCZa.png" alt="enter image description here"></a></p>
  
  <p><strong>reduced zoom</strong>
  <a href="https://i.stack.imgur.com/TSE3L.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TSE3L.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;%@ page language="java" contentType="text/html; charset=ISO-8859-1"
      pageEncoding="ISO-8859-1"%&gt;
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Insert title here&lt;/title&gt;
  &lt;style&gt;
  #footer {
  position:fixed;
  height: 20px;
  bottom: 0;
  width: 100%;
  background-color: green;
  }
  #main{
  margin-top:-10px;
  border-radius: 8px;
  border: 1px solid #73AD21;
  height: 550px;
  
  }
  &lt;/style&gt;
  &lt;script src="../jquery/jquery-3.1.1.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../bootstrap/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;link  href="../bootstrap/bootstrap.min.css"  rel="stylesheet" &gt;
  &lt;script&gt;
  $(document).ready(function(){
      $("#header").load("header/header.jsp");
  
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-xs-12"&gt;
  &lt;div id="header"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="container-fluid" &gt;
  &lt;div class="col-xs-12"&gt;
  &lt;div id="main"&gt;CONTENT&lt;br&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row"&gt;
  &lt;div class="col-xs-12"&gt;
  &lt;div id="footer"&gt;Footer&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I don't want that extra space between main div and footer. Is there any way that I can do so?</p>