title: What is the difference between min-height and height property?
body: <p>I looked this question up but couldn't understand it in relation to my specific issue.  </p>
  
  <p>I set up the html in question as follows:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="inner"&gt;
        &lt;div class="weatherdata"&gt;
          &lt;p class="city"&gt;&lt;/p&gt;
          &lt;p class="description"&gt;&lt;/p&gt;
          &lt;p class="temp"&gt;&lt;/p&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
          &lt;p class="mintemp"&gt;&lt;/p&gt;
          &lt;p class="maxtemp" &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>The css styling was this:</p>
  
  <pre><code>.container-fluid {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
  }
  </code></pre>
  
  <p>The issue I had was that when I resized (downsized) the browser window, a scroll bar appeared and a load of whitespace underneath.  My boyfriend comes along as suggests changing height to min-height (after hours of trying to resolve it myself).  This worked, but he had only guessed so couldn't explain why (he is also fairly new to this).  </p>
  
  <p>I'm unsure what's going on here to make that work.  </p>
  
  <p>Could anyone help?</p>