title: Bootstrap 3 - Fixed height for all pages
body: <p>At the moment when I load up a different webpage the div gets smaller and the footer goes up or down dependent of what content it inside the div. </p>
  
  <p>Can someone help me as to why this happening. </p>
  
  <p>My Code (slightly different as using Flask):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;WBP Assignment&lt;/title&gt;
    &lt;meta name="keywords" content="UEA, University, Coursework, York, Cottage, WBP, Web, Based, Programming"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;&lt;!--mobile first :p --&gt;
    &lt;meta name="description" content="UEA Undergraduate coursework assignment"&gt;
    &lt;meta name="author" content="Matthew Wilson, Pedro Bernardina"&gt;
  
    &lt;!--Bootstrap CSS--&gt;
    &lt;link href="static/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="static/style.css" rel="stylesheet"&gt;
  
    &lt;!--Bootstrap Core JS--&gt;
    &lt;script type="text/javascript" src="static/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="static/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="static/scripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body background="templates/background.jpg"&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="row clearfix"&gt;
          &lt;div class="col-md-12 column"&gt;
              &lt;!-- A carousel inside the jumbotron, sliding data every 3000ms. --&gt;
              &lt;div class="carousel slide" id="carousel-274384" data-interval="3000" data-ride="carousel"&gt;&lt;!--carousel begin--&gt;
                  &lt;div class="carousel-inner"&gt;
  
                      &lt;div class="item active"&gt;&lt;!--begin item--&gt;
                              &lt;img alt="" src="static/img/1.JPG"&gt;
                      &lt;/div&gt;&lt;!--end item--&gt;
  
                      &lt;div class="item"&gt;&lt;!--begin item--&gt;
                          &lt;img alt="" src="static/img/2.JPG"&gt;
                      &lt;/div&gt;&lt;!--end item--&gt;
  
                      &lt;div class="item"&gt;
                          &lt;img alt="" src="static/img/3.JPG"&gt;
                      &lt;/div&gt;&lt;!--end item--&gt;
  
                      &lt;div class="item"&gt;
                          &lt;img alt="" src="static/img/4.JPG"&gt;
                      &lt;/div&gt;&lt;!--end item--&gt;
  
                      &lt;div class="item"&gt;
                          &lt;img alt="" src="static/img/5.JPG"&gt;
                      &lt;/div&gt;&lt;!--end item--&gt;
                  &lt;/div&gt;&lt;!--end carousel inner--&gt; 
  
              &lt;/div&gt;&lt;!--end carouseul--&gt;
  
              &lt;nav class="navbar navbar-default" role="navigation"&gt;
                  &lt;div class="navbar-header"&gt;
                       &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&gt; &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;span class="icon-bar"&gt;&lt;/span&gt;&lt;/button&gt; &lt;a class="navbar-brand" href="/"&gt;York Cottage&lt;/a&gt;
                  &lt;/div&gt;
  
                  &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li&gt;
                              &lt;a href="/"&gt;Home&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/features"&gt;Features&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/gallery"&gt;Gallery&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/comments"&gt;Comments&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;a href="/contact"&gt;Contact&lt;/a&gt;
                          &lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/div&gt;
  
              &lt;/nav&gt;
              &lt;div class="row clearfix"&gt;
              {% block content %}
              &lt;div class="content"&gt;
  
                  &lt;div class="col-md-12 column" &gt;
  
                      {% if pageType == "index" %}
                      &lt;h3&gt; {{ title }} &lt;/h3&gt;
  
                      {% for p in paragraph %}
                      &lt;p&gt; {{ p }}&lt;/p&gt;
                      {%  endfor %}
  
  
  
                      &lt;a href="http://www.southern-comfort.co.uk/" class="img-responsive" target="_blank"&gt;&lt;img alt="" width="550" src="static/img/comfort.jpeg"&gt;&lt;/a&gt;
  
                      {% endif %}
  
                      {% if pageType == "features" %} &lt;!-- if vistor clicks features then index body disappears and features appears --&gt;
  
                      &lt;h3&gt; {{ title }} &lt;/h3&gt;
  
                      &lt;ul&gt;
                        &lt;li&gt;Living Room: Spacious open plan sitting room. Two sofas, 42" flat screen TV. DVD, Video, CD Player. &lt;/li&gt;
                        &lt;li&gt;Kitchen/ Diner: Well equipped fitted kitchen with washing machine, dishwasher and microwave. Large dinning table with six chairs. &lt;/li&gt;
                        &lt;li&gt;Bedroom 1: Double bed with an en-suite room. Fitted wardrobes.&lt;/li&gt;
                        &lt;li&gt; Bedroom 2: Double bed with fiited wardrobes &lt;/li&gt;
                        &lt;li&gt; Bedroom 3: Two twin beds with a fitted wardrobe&lt;/li&gt;
                        &lt;li&gt; Bedroom 4: Single bed with two large fitted wardrobes&lt;/li&gt;
                        &lt;li&gt; Upstairs Bathroom: Upstairs bathroom with bath&lt;/li&gt;
                        &lt;li&gt; Downstairs Bathroom: Bathroom with power shower&lt;/li&gt;
                        &lt;li&gt; Patio picnic bench overlooking heated swimming pool. Large front garden with driveway for three cars. &lt;/li&gt;
                      &lt;/ul&gt;
                      {% endif %}
  
  
                  &lt;/div&gt;
              {% endblock %}
              &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-1 column"&gt;
              &lt;/div&gt;&lt;!--right margin--&gt;
  
  
              &lt;div class="row clearfix"&gt;
  
                  &lt;div class="col-md-1 column"&gt;
                  &lt;/div&gt;&lt;!--left margin--&gt;
  
                  &lt;div class="col-md-12 column" id="footer"&gt;&lt;!--footer--&gt;
                      &lt;p&gt;Matthew Wilson
                          &lt;br/&gt;Pedro Bernardina
                          &lt;br/&gt;Norwich Research Park, NR4 7TJ
                          &lt;br/&gt;University of East Anglia
                          &lt;br/&gt;All Rights Reserved
                      &lt;/p&gt;
                  &lt;/div&gt;
  
                  &lt;div class="col-md-1 column"&gt;
                  &lt;/div&gt;&lt;!--right margin--&gt;
  
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.carousel-inner{
    width:100%;
    max-height: 28em !important;
  }
  
  .navbar-default {
      background-color: #FFFFFF;
  
  
      }
  
  
  div#jumbotron {
    margin-top: 2em;
  }
  
  div#map_canvas {
    height:45em;
    background-color: black;
  }
  
  div#main_cmt {
    overflow: scroll;
    background-color: white;
    height: 50em;
    margin-top: 2em;
  
  }
  
  ul#navbar {
    background-color:white;
  }
  
  div#content {
    background-color: white;
    height: 50em;
    margin-top: 2em;
  }
  
  div#extra {
    background-color: white;
    height: 50em;
    margin-top: 2em;
    text-align: justify;
  }
  
  div#footer {
    background-color: #484848;
    color: white;
    padding: 1em;
    margin-top: 2cm;
  }
  
  
  
  body {
    background: url("..\FlaskApp\FlaskApp\templates\background.jpg");
  }
  /* resizes images in the website when screen is smaller */
  
     img {
            display: block;
            height: auto;
            max-width: 100%;
     }
  
  
  /* Smartphones (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 320px) 
  and (max-device-width : 480px) {
  /* Styles */
  }
  
  /* Smartphones (landscape) ----------- */
  @media only screen 
  and (min-width : 321px) {
  /* Styles */
  }
  
  /* Smartphones (portrait) ----------- */
  @media only screen 
  and (max-width : 320px) {
  /* Styles */
  }
  
  /* iPads (portrait and landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
  /* Styles */
  }
  
  /* iPads (landscape) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : landscape) {
  /* Styles */
  }
  
  /* iPads (portrait) ----------- */
  @media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) 
  and (orientation : portrait) {
  /* Styles */
  }
  
  /* Desktops and laptops ----------- */
  @media only screen 
  and (min-width : 1224px) {
  /* Styles */
  }
  
  /* Large screens ----------- */
  @media only screen 
  and (min-width : 1824px) {
  /* Styles */
  }
  
  /* iPhone 4 ----------- */
  @media
  only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
  }
  </code></pre>