min-height 和 height 属性有什么区别? [英] What is the difference between min-height and height property?

问题描述

我查了这个问题，但无法理解与我的具体问题相关的内容.

我按如下方式设置了有问题的 html:

<div class="inner"><div class="weatherdata"><p class="city"></p><p class="描述"></p><p class="temp"></p><br><br><br><p class="mintemp"></p><p class="maxtemp" </p>

css 样式是这样的:

.container-fluid {背景尺寸:100% 100%；背景重复:不重复；位置:绝对；宽度:100%；高度:100%；}

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

我不确定这里发生了什么才能使这项工作发挥作用.

有人可以帮忙吗?

解决方案

高度

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

div.mydiv {高度:100px；}

无论如何，div 都会有 100 像素的高度.即使内容跨度超过 100px;

最小高度

div.mydiv {最小高度:100px；}

这意味着 div 将从 100px 开始，如果内容推动 div 超过 100px，它将继续增长.但是，如果您的内容占用的空间小于 100 像素，它仍然需要占用 100 像素的空间.

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?

解决方案

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.

这篇关于min-height 和 height 属性有什么区别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！