min-height和height属性有什么区别？

Question

我看了这个问题但是对于我的具体问题无法理解。

我按照以下方式设置了html：

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

css样式是这样的：

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

我遇到的问题是，当我调整浏览器窗口的大小（缩小尺寸）时，会出现一个滚动条，下面有一些空格。我的男朋友出现了建议将高度改为最小高度（我自己试图解决它的几小时后）。这很有效，但他只是猜测不能解释原因（他对此也很新）。

我不确定这里是做什么的。

有人可以帮忙吗？

Answer 1

高度

height属性会阻止元素的高度为给定值：

div.mydiv {
   height: 100px;
}

无论如何，div都有100px的高度。即使内容超过100px;

最小高度

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

这意味着div将从100px开始，如果内容将div推到100px以上，它将继续增长。但是，如果您的内容小于100px，则空间仍需要100px。

Answer 2

设置min-height，因此动态高度（例如auto / 100％）不会低于您设置的最小高度。