What is the difference between min-height and height property? [duplicate]

Question

I looked this question up but couldn't understand it in relation to my specific issue.

I set up the html in question as follows:

<div class="container-fluid">
    <div class="inner">
      <div class="weatherdata">
        <p class="city"></p>
        <p class="description"></p>
        <p class="temp"></p><br><br><br>
        <p class="mintemp"></p>
        <p class="maxtemp" </p>
      </div>
    </div>

The css styling was this:

.container-fluid {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  position: absolute;
  width: 100%;
  height: 100%;
}

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).

I'm unsure what's going on here to make that work.

Could anyone help?

Answer 1

Height

The height property blocks the height of an element to the given value:

div.mydiv {
   height: 100px;
}

The div will have 100px height no matter what. Even if the content spans more than 100px;

Min-height

div.mydiv {
  min-height: 100px;
}

This means the div will start at 100px, if the content pushes the div beyond 100px it will continue growing. However if you have content that takes less than 100px it will still take 100px in space.