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%;
}

我遇到的问题是，当我调整（缩小）浏览器窗口大小时，会出现滚动条和大量的空白。我的男朋友建议将高度改为最小高度（经过数小时的尝试后）。这起作用了，但他只是猜测，无法解释为什么（他也是新手）。

我不确定是什么原因让它起作用。

有人能帮忙吗？

- katie

---

height和min-height的区别在于，height定义了元素的高度值，这就是元素的实际高度。而min-height则表示元素的最小高度为某一特定值，但是如果需要的话，元素仍然可以继续增长（例如，内容内部使其变得更高等）。 - Michael Coker

你可以添加min-height属性，以确保当你调整窗口大小时，它不会变得比min-height更小。这可以让你更好地控制高度。 - jmag

Answer 1

高度

height 属性将元素的高度限制为给定值：

div.mydiv {
   height: 100px;
}

无论内容是否超过100个像素，div 的高度都将保持在100个像素。

最小高度

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

这意味着 div 将从 100px 开始，如果内容将 div 推出 100px，则 div 将继续增长。但是，如果您的内容少于 100px，则仍将占用 100px 的空间。

- Ibu

Answer 2

min-height属性用于设置元素的最小高度，当使用自适应高度（例如auto/100%）时，元素的高度不会低于您所设定的最小高度。

- jmag