title: Making a footer of fixed height for all pages in html and css
body: <p>I have been designing a website using html and css, for which i have made a footer. 
  the code for the footer is as follows:</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>footer {
    color: white;
    width: 100%;
    height: 40px;
    padding: 0;
    display: block;
    clear: both;
  }
  
  .footrow {
    overflow: hidden;
    background-color: #111;
    display: block;
    line-height: 18px;
    background-image: url('../images/footer.jpg');
  }
  
  .footrow2 {
    overflow: hidden;
    background-color: #002c42;
    display: block;
    padding: 15px;
    height: 48px;
  }
  
  .foot {
    max-width: 1080px;
    margin: 0 auto;
    font-size: 11px;
  }
  
  .foot-p {
    font-weight: 600;
    color: #66e355 !important;
    margin: 15px;
  }
  
  .half-width {
    width: 50%;
    float: left;
    line-height: 1px;
  }
  
  .quarter-width {
    width: calc(25% - 30px);
    float: left;
    padding: 20px;
  }
  
  #social2 {
    display: block;
    background-color: transparent;
    float: left;
    margin: 0 auto;
  }
  
  .sc-icn2 {
    width: 50px;
    height: 50px;
    display: block;
    margin-right: 5px;
    margin-bottom: 5px;
    float: left;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;footer&gt;
    &lt;div class="footrow"&gt;
      &lt;div class="foot"&gt;
        &lt;div class="quarter-width"&gt;
          &lt;p style="color:#fff;"&gt;Address&lt;/p&gt;
          &lt;hr&gt;
          &lt;div&gt;
            Science &amp; Technology University
            &lt;hr&gt; Phone: 02-7458745
            &lt;hr&gt; Email: &lt;a href="mailto:registrar@abc.gmail.com"&gt;registrar@abc.gmail.com&lt;/a&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="quarter-width"&gt;
          &lt;p style="color:#fff;"&gt;Quick Links&lt;/p&gt;
          &lt;hr&gt;
          &lt;a href=""&gt;Link 1&lt;/a&gt;&lt;br&gt;
          &lt;a href=""&gt;Link 2&lt;/a&gt;&lt;br&gt;
          &lt;a href=""&gt;Link 3&lt;/a&gt;&lt;br&gt;
        &lt;/div&gt;
        &lt;div class="quarter-width"&gt;
          &lt;p style="color:#fff;"&gt;Follow Us&lt;/p&gt;
          &lt;hr&gt;
          &lt;div id="social2"&gt;
            &lt;div class="sc-icn2"&gt;
              &lt;a href="" target="_blank"&gt;&lt;img src="images/social/facebook.png" width="50px" height="50px" alt="facebook" title="fb"&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="sc-icn2"&gt;
              &lt;a href="" target="_blank"&gt;&lt;img src="images/social/twitter.png" width="50px" height="50px" alt="twitter" title="@board"&gt;&lt;/a&gt;
            &lt;/div&gt;
            &lt;div class="sc-icn2"&gt;
              &lt;a href="" target="_blank"&gt;&lt;img src="images/social/instagram2.png" width="50px" height="50px" alt="instagram" title=" Photography"&gt;&lt;/a&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="quarter-width"&gt;
          &lt;p style="color:#fff;"&gt;Report&lt;/p&gt;
          &lt;hr&gt;
          &lt;a style="cursor:pointer;" onclick="feedClick('bug')"&gt;Found 
  a Bug&lt;/a&gt;&lt;br&gt;
          &lt;a style="cursor:pointer;" onclick="feedClick('feed')"&gt;Feedback&lt;/a&gt;&lt;br&gt;
          &lt;a style="cursor:pointer;" onclick="feedClick('feature')"&gt;Request feature&lt;/a&gt;&lt;br&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="footrow2"&gt;
      &lt;div class="foot"&gt;
        &lt;div class="half-width"&gt;
          &lt;p class="foot-p"&gt;&amp;copy;- 2018 | All rights reserved&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="half-width"&gt;
          &lt;p style="float:right !important;" class="foot-p"&gt;Developed &amp;amp; Maintained By &lt;a style="color:orange" href="https://www.facebook.com/abc"&gt;&lt;strong&gt;SK Biswas&lt;/strong&gt;&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/footer&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The footer has two parts. one is within class "footrow" and another is within "footrow2". footrow will take position above footrow2. the problem is the height of the content of footrow2 class is taking different height for different pages. Is there any way to make it of a fixed height?</p>