9

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?

katie
  • 101
  • 1
  • 1
  • 2
  • 3
    The difference between `height` and `min-height` is that `height` defines a value for the height and that's how tall the element will be. `min-height` says that the _minimum_ height is some value but that the element can continue to grow past that defined height if needed (like the content inside makes it taller or whatever). – Michael Coker Feb 06 '17 at 21:43
  • you can add the min-height just to ensure when you resize the window it will not go smaller than min-height. It gives you more control over your height. – jmag Feb 06 '17 at 21:49

2 Answers2

22

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.

Community
  • 1
  • 1
Ibu
  • 42,752
  • 13
  • 76
  • 103
4

min-height is set so dynamic height(e.g. auto/ 100%) will not go under the minimum height you set it with.

jmag
  • 796
  • 1
  • 8
  • 17