CSS - 100％高度超过100％？答案

【问题标题】：CSS - 100% height is more than 100%?CSS - 100％高度超过100％？
【发布时间】：2017-11-01 08:01:22
【问题描述】：

我正在为 -removed by author- 的客户重新构建一个页面（它是希伯来语，但这无关紧要）。
我在页脚（灰色背景）方面遇到了一些 CSS 问题 - 我希望灰色背景适合该框内的内容 - 所以如果列表增长，背景 div 的高度会增加，如果列表缩小，那么也会背景。我知道这可以通过 100% 的高度来实现，而且我知道这个概念的基础知识。我知道父容器也必须设置为 100% 高度，这样背景就会拉伸。
但是，如果您查看我链接到的页面上的页脚，以及它所在的 2 个容器，它向下延伸的距离比应有的要远得多（使用 Web 开发人员工具栏，您可以看到每个容器的高度）。此外，它的容器似乎设置在不同的高度，即使它们也应该根据内容进行拉伸。
我尝试在任何地方放置高度、最小高度、清晰和定位设置——我就是无法让它正常工作。
我知道整个“CSS 100% 高度”问题很常见。相信我，我已经阅读并搜索过有同样问题的人 - 但我什么也没找到。

【问题讨论】：

您忘记添加链接了。此外，您的帖子中的几个换行符会使其更具可读性，并让您更有可能获得帮助。
我没有忘记，因为我的客户，我只是不想实际链接到它 - 请原谅我。另外 - 只是注意到我可以用 HTML 应用换行符。
啊，我知道是怎么回事。很高兴你的问题得到了解决！

标签： css height

【解决方案1】：

内边距、边距和边框不计入高度和宽度，因此每边具有 10 像素内边距的元素的 100% 高度或宽度实际上会占用 100% 外加 20 像素。如果您使用边距和边框，还可以添加更多内容。

解决这个问题的方法是使用 CSS box-sizing:border-box; 属性，它允许您切换框模型，以便考虑边框和填充（边距仍然保留在框外，所以如果您使用 100% ，不要使用边距）。

这有效地使盒子模型以与旧的 Quirks Mode 盒子模型相同的方式工作。

在此处了解有关box-sizing 功能的更多信息：http://css-tricks.com/box-sizing/

box-sizing 具有相当不错的跨浏览器支持，但请注意，它不适用于 IE7 或更低版本，并且需要某些浏览器的供应商前缀。

在此处查看有关浏览器支持的更多信息：http://caniuse.com/#search=box-sizing

【讨论】：

你是救生员，这让我发疯了。不久前我读到 box-sizing 时，我从来没有真正想过要使用它，因为我担心旧浏览器的兼容性问题。但我现在看到box-sizing 确实是我的谜团的答案。另外，我要感谢@ItaiSagi 的评论，因为在我的ul 之后没有<div style="clear:both;"></div>，背景没有拉伸。为你们俩干杯。
@RickAnthony 好老的跨浏览器内部元素解决方案：jsfiddle.net/nrNyU 上面是问题，下面是解决方案。（也在代码中。注释行分开。）
@Lollero 谢谢，这很好地说明了这一点。不知道 JSFiddle - 它肯定会派上用场。

【解决方案2】：

这是一个疯狂的猜测，因为没有链接。 div有填充吗？内边距总是添加到 div 的高度，即使该高度是 100%。

【讨论】：

【解决方案3】：

不要这样对自己... 清除它。

将<ul> 向左或向右浮动，并在父 div 结尾之前添加一个<div style='clear:both'>。

Behatzlacha，啊喂。

【讨论】：