html - min-height 和 height 属性有什么区别?

标签 html css

<分区>

我查看了这个问题,但无法理解它与我的具体问题的关系。

我将相关的 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%;
}

我遇到的问题是,当我调整(缩小)浏览器窗口时,会出现一个滚动条,下面有一大堆空白。我的男朋友按照建议将高度更改为最小高度(经过数小时尝试自己解决)。这行得通,但他只是猜测,所以无法解释原因(他对此也很陌生)。

我不确定这里发生了什么才能使这项工作成功。

有人能帮忙吗?

最佳答案

高度

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

div.mydiv {
   height: 100px;
}

无论如何,div 的高度都是 100px。即使内容跨越超过 100px;

最小高度

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

这意味着 div 将从 100px 开始,如果内容将 div 推到 100px 以上,它将继续增长。但是,如果您的内容占用的空间小于 100 像素,它仍将占用 100 像素的空间。

关于html - min-height 和 height 属性有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42077726/

上一篇:javascript - 在按钮或 div 外部单击时隐藏按钮

下一篇:javascript - iPhone 7 上的网站滚动缓慢且静态

相关文章:

html - 垂直居中旋转的元素

javascript - 用于单个页面上单个音频元素的 jQuery 预加载器

javascript - 使用 AngularJS 提交时将空输入字段设置为 ng-invalid?

HTML 表格对齐

javascript - 多行输出文本

html - 如何使div图像宽度全屏但让高度超出屏幕

javascript - 控制两个div的随机显示

css - 内联元素的 Firefox 分词

javascript - JavaScript 创建的元素未被 CSS 文件格式化

javascript - 单击虚拟键盘图标时保持对输入框的关注