Ahmad Shadid翻译了“
CSS中的最小和最大宽度/高度 ”。
有时，开发人员需要限制元素相对于父元素的宽度，同时使它保持动态。 通过以这种方式设置初始大小，并在存在可用空间的情况下进行扩展。 例如，我们需要一个最小宽度的按钮。 在这种情况下，方便使用最大值和最小值的属性。
在本文中，我们将熟悉宽度和高度的最大值和最小值的CSS属性，并详细介绍它们中的每一个及其用例。
宽度属性
我想从与宽度有关的属性开始讨论。 我们有
min-width和
max-width,它们在某些情况下非常重要和有用。
最小宽度（最小宽度）
min-width属性旨在防止元素的宽度减小到指定值以下。 默认值是
auto ，最大可以为
0 。
为了演示它，让我们看一个基本的例子：
有一个带有文本的按钮，其大小可以从一个单词到几个单词不等。 为了确保此按钮具有最小的允许宽度，即使其中只有一个单词，也需要使用
min-width 。 最小宽度设置为100像素，因此即使按钮的内容非常短，例如仅“ Done”（完成）或仅一个图标之类的内容，它的大小仍然足够大，可以保持明显。 当您使用翻译成不同语言的网站时，这一点尤其重要。
考虑一下Twitter上的阿拉伯语示例：
在上面的示例中，按钮包含单词“تم”，在阿拉伯语中表示“完成”。 由于内容太短，按钮本身的宽度变得太小，因此我通过设置
min-width属性来设置
min-width ，该属性可以在右图（在“ After”部分中）看到。
最小宽度和填充
尽管
min-width属性允许在增加按钮内容的大小的同时增加按钮的宽度，但仍应在侧面设置
padding以保证从其边界缩进。 差异如下图所示。
最大宽度（最大宽度）
max-width属性旨在防止元素扩展到指定值之外。 默认值为
none 。
使用最大宽度的一个常见且简单的示例是将其应用于图像。 考虑下面的示例：
如果我们将
max-width: 100%属性应用于图像，则即使其原始大小较大，它也将保留在父元素的边界内。 如果图像最初小于父图像，则此属性不会以任何方式影响它。
使用最小宽度和最大宽度
如果两个属性都适用于一个元素，那么哪个将覆盖另一个的值？ 换句话说，哪个属性具有更高的优先级？
如果
min-width值大于
max-width ，它将被视为元素的宽度。 考虑以下示例：
的HTML <div class="wrapper"> <div class="sub"></div> </div>
的CSS .sub { width: 100px; min-width: 50%; max-width: 100%; }
初始
width值为100px，除此之外，还设置了
min-width和
max-width属性。 结果，此元素的宽度将不超过父块宽度的50％
高度属性
除了最小和最大宽度属性外，高度还有相同的属性
最小高度（最小高度）
min-height旨在防止元素降至指定值以下。 默认值是
auto ，最大可以为
0 。
为了演示它，让我们看一个简单的例子。
我们有一个包含文本内容的部分。 无论大小文本都必须看起来漂亮
的CSS .sub { display: flex; align-items: center; justify-content: center; padding: 1rem; min-height: 100px; color: #fff; background: #3c78dB; }
最小高度设置为100px，并且内容使用flexbox在水平和垂直方向上居中。 如果有更多内容会怎样？ 例如，将有一个完整的段落
是的，您已经猜到了。 区域的高度将增加以容纳更多内容。 这样，我们可以创建响应内容量的灵活组件。
最大高度（最大高度）
max-height旨在防止元素的高度超过指定值。 默认值为
none 。
在下面的示例中，我为内容设置了
max-height 。 但是因为它大于指定的区域，所以会发生溢出，并且文本超出了父元素的边界
物业使用范例
考虑
min-width ，
min-height ，
max-width和
max-height属性的一些常见和罕见用例。
标签清单
建议在标签列表中指出每个标签的最小宽度，以免内容短时不影响其外观。
有了这样的灵活性，无论其内容有多短，标签都将看起来不错。 但是，如果作者设置了一个非常大的标签名称，并且他使用的CMS（内容管理系统）对标签中的字符数没有限制，会发生什么？ 在这种情况下，您也可以使用
max-width的CSS .c-tag { display: inline-block; min-width: 100px; max-width: 250px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
使用
max-width可以将最大宽度限制为特定值。 但是，仅应用此属性是不够的。 超过最大宽度的内容必须被截断。
https://codepen.io/shadeed/pen/320e42b7ad75c438a9e633417d737d16按键
对于按钮使用最小和最大属性，存在不同的方案，因为按钮的组件也有很多选项。 考虑以下布局：
请注意，“获取”按钮的宽度太小。 如果由于某种原因该按钮仍然没有文本（只有一个图标），那么一切都会变得更糟。 在这种情况下，设置最小宽度非常重要
调零Flexbox的最小宽度
min-width属性的默认值为auto，其值为零。 当项目是弹性项目时，
min-width的值不会变为零。 flex元素的最小大小是其内容的大小。
根据
CSSWG ：
默认情况下，弹性项目不会变得小于其内容所需的最小大小（最长的单词或具有固定大小的项目的长度）。 要更改此设置，请设置
min-width或
min-height 。
考虑以下示例：
用户名包含一个很长的单词，导致溢出和水平滚动。 尽管我在下面添加了CSS来截断内容：
的CSS .c-person__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
由于标头是flex元素，解决方案是重置最小宽度值并将其设置为零
的CSS .c-person__name { min-width: 0; }
修复后，它应该是这样的：
从
CSSWG描述得出的
结论是，将
overflow属性设置为不
visible的值可以导致将最小宽度值计算为零，这也解决了我们的问题，而无需显式设置
min-width: 0 。
Flexbox的零最小高度
尽管与最小宽度相比，这是一个不太常见的问题，但仍然可能发生。 问题是弹性项目不能短于其内容。 结果，
min-height值被设置为等于内容的大小。
考虑以下示例：
红色文字应以容器的边框修剪。 但是由于此元素是flex元素，因此它的
min-height等于内容的高度。 为了防止这种情况，我们必须重置最小高度值。 让我们看一下HTML和CSS代码：
的HTML <div class="c-panel"> <h2 class="c-panel__title"></h2> <div class="c-panel__body"> <div class="c-panel__content"></div> </div> </div>
的CSS .c-panel { display: flex; flex-direction: column; height: 180px; } .c-panel__body { min-height: 0; } .c-panel__content { overflow-y: scroll; height: 100%; }
添加
min-height: 0元素将重置属性值，并将按预期开始工作
演示版
同时使用最小宽度和最大宽度
有时在某些情况下，我们有一个具有最小宽度的元素，但是同时没有指定最大宽度。 尽管这不是故意的，但是这可能导致元素变得太宽。 考虑以下示例：
由于宽度是以像素为单位定义的，因此无法确定以上内容是否适用于移动设备。 为了解决这个问题，我们可以使用百分比代替像素作为最小和最大属性。 考虑下面的示例：
我为图像添加了以下CSS：
的CSS img { min-width: 35%; max-width: 70%; }
页面容器
使用
max-width属性的最有用的方案之一是包装页面（或容器）。 通过将页面设置为最大宽度，我们可以确保方便用户查看和阅读内容
下面是一个具有左右
padding的居中包装器的示例
的CSS .wrapper { max-width: 1170px; padding-left: 16px; padding-right: 16px; margin-left: auto; margin-right: auto; }
最大宽度和度量单位“ ch”
度量单位
ch等于当前元素的字体中使用的字符
0 （零）的宽度。 在max-width属性中使用它，我们可以调整字符串中的字符数。 根据Smashing Magazine的这篇文章，建议的行长为45到75个字符。
在上一个带有包装元素的示例中，我们可以受益于此符号的使用，因为它是商品元素
的CSS .wrapper { max-width: 70ch; }
对高度未知的元素进行动画处理
有时，我们会遇到使内容高度未知的手风琴或移动菜单设置动画的问题。 在这种情况下，使用
max-height可能是一个很好的解决方案。
考虑以下示例：
当按下菜单按钮时，菜单本身应该从上到下平滑显示。 没有JavaScript，就不可能做到这一点，除非元素具有固定的高度（不建议这样做）。 但是，最大高度是可能的。 这个想法是给元素增加一个很高的高度，例如
max-height: 20rem ，这是无法达到的，之后我们可以设置动画步骤，从
max-height: 0到
max-height: 20rem的CSS .c-nav { max-height: 0; overflow: hidden; transition: 0.3s linear; } .c-nav.is-active { max-height: 22rem; }
单击一个汉堡包观看动画
顶部的最小高度（英雄）
如您所见，我不喜欢将元素设置为固定高度。 我觉得这样做违背了Web上的组件应该灵活的概念。 在网站的第一部分（“英雄”部分）添加最小高度在添加非常大的内容（这种情况发生）的情况下很有用。
考虑以下示例，其中有一个固定高度的“英雄”部分。 看起来不错
但是，当内容增长时，它将使容器溢出并超出节包装器的范围。 不好
为了事先避免这个问题，我们可以添加
min-height而不是
min-height 。 我们这样做，至少是为了清除我们的良心。 即使这可能是导致页面显示异常的原因，但我认为应该首先在内容管理系统（CMS）中避免这种情况。 之后，问题已解决，页面看起来不错：
内容溢出的问题不仅在于它可以大于父级的固定高度。 这可能是由于屏幕尺寸减小，以及由于连字符引起的文本内容高度增加所致：
如果您未指定固定高度，而是仅使用
min-height将其限制为最小值，则上述问题将根本不会发生。
模态窗
对于模式窗口组件，必须同时指定最小和最大宽度，因此，这将适用于任何尺寸的屏幕（从移动设备到台式机）。 这让人想起有关CSS-Tricks的有趣文章，该文章告诉您在这种情况下该怎么做。
1路 .c-modal__body { width: 600px; max-width: 100%; }
2路 .c-modal__body { width: 100%; max-width: 600px; }
对于我来说，我更喜欢第二种方式，因为我只需要定义
max-width: 600px 。 模态窗口是
div元素，因此它的宽度已设置为父级的100％，对吗？
考虑下面的模态窗口示例。 请注意，如果视口中没有足够的可用空间，那么宽度将如何变为父级宽度的100％
最小高度和粘性页脚
当页面的内容不够大时，页脚不会停留在底部。 让我们看一个更好地说明这一点的示例：
请注意，页脚不会粘在浏览器窗口的底部边缘。 这是因为内容的高度小于浏览器窗口的高度。 解决此问题后，页面应如下所示：
首先，将body元素设置为flex容器，然后将其设置为视口最小高度的100％。
的CSS body { display: flex; flex-direction: column; min-height: 100vh; } footer { margin-top: auto; }
我建议阅读有关粘性页脚的
文章 。
演示版比例元素大小和最大宽度/高度
为了制作一个根据视口大小缩放的比例容器，曾经
使用padding提出了一个
技巧 。 现在，我们可以通过组合视口单位和最大宽度/高度来模拟类似行为。
根据Miriam Suzanne的
文章中的材料，我想解释一下它是如何工作的。
我们有一个尺寸为644 x 1000像素的图像。 我们需要执行以下操作：
- 宽高比：
height / width （高度除以宽度）
- 容器宽度：可以是固定的或动态的（100％）
- 将
height设置为视口宽度的100％乘以宽高比
- 将
max-height设置max-height等于容器宽度乘以宽高比
- 设置
max-width等于容器宽度
的CSS img { --ratio: 664 / 1000; --container-width: 30em; display: block; height: calc(100vw * var(--ratio)); max-height: calc(var(--container-width) * var(--ratio)); width: 100%; max-width: var(--container-width); }
HTML /高度为100％的正文
如果我们希望body元素占据视口高度的100％，该怎么办？ 这是整个Web社区，尤其是StackOverflow
网站上的常见问题。
首先，您需要将
height: 100%设置为
html元素的
height: 100% 。 这将确保根元素为100％高。 然后为
body元素添加
min-height 。 使用
min-height的原因是因为此属性允许
body元素的高度动态变化，并调整内容的大小
的CSS html { height: 100%; } body { min-height: 100%; }
演示版注意事项
最小宽度和块元素
有时我们会忘记尝试将
min-width应用于的元素是block。 最后，这可能会造成混淆，并且不会影响元素。 确保物品不块状
CSS比较功能
在研究StackOverflow开发人员面临的主要问题时，我遇到了这个问题，作者提出以下问题：
可以做这样的事情吗？ max-width: calc(max(500px, 100% - 80px))或也许这是max-width: max(500px, calc(100% - 80px)))
所需的行为是使元素的宽度保持不超过500px。 如果范围的宽度不足以容纳该元素，则宽度应为
100% – 80px 。
至于针对该问题而发布的解决方案，我尝试将其应用，并且可以在Chrome 79和Safari 13.0.3中使用。 尽管这超出了本文的范围，但我仍将在此处给出解决方案：
的CSS .yourselector { max-width: calc(100% - 80px); } @media screen and (max-width: 580px) { .yourselector { max-width: 500px; } }
资料和材料有待进一步研究