CSS - 100％高度超过100％？

我正在为作者提供的 - 被移除的客户端重新构建一个页面（这是希伯来语，但这是无关紧要的）。
我遇到了页脚的一些CSS问题（灰色背景） - 我想根据该框内的内容来适合灰色背景 - 所以如果列表增长，背景div的高度增加，并且如果列表缩小，那么做背景。我知道这可以达到100％的高度，我知道这个概念的基础知识。我知道父容器也必须设置为100％高度，这样背景就会伸展。
但是，如果您查看链接到的页面上的页脚以及它所在的2个容器，它会比应该放大得更远（使用Web Developer Toolbar可以查看每个容器的高度）。此外，它的容器似乎设置在不同的高度，即使它们也应根据内容进行拉伸。
我曾尝试将高度，最小高度，清晰度和定位设置无处不在 - 我无法让它正常工作。
我知道整个“CSS 100％高度”问题很常见。相信我，我已阅读过，而且我也在寻找有这个问题的人 - 但我什么也没找到。CSS - 100％高度超过100％？

来源

2011-08-10 Rick Anthony

您忘记了添加链接。此外，您的帖子中的几条换行符会使其更具可读性，并使您更有可能获得帮助。 – daveyfaherty

我没有忘记，因为我的客户我只是不想实际链接到它 - 请原谅我。此外 - 只是注意到我可以用HTML换行符。 –

啊，我知道那是怎么回事。很高兴你的问题解决了！ – daveyfaherty

填充，边距和边框不计算在高度和宽度中，因此每边10px填充的元素的100％高度或宽度实际上会占用100％加上20个像素。如果您使用边距和边框，请添加更多。

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

这有效地使盒模型的工作方式与旧的怪癖模式盒模型相同。

了解更多关于box-sizing功能在这里：http://css-tricks.com/box-sizing/

box-sizing具有较好的跨浏览器支持，但要注意，它并没有在IE7或以下工作，需要一些浏览器供应商前缀。

查看更多有关该浏览器支持浏览：http://caniuse.com/#search=box-sizing

来源

2011-08-10 10:21:52 Spudley

你是一个拯救生命的人，这一直让我发疯。当我前段时间阅读了关于盒子大小的评估之后，我从来没有真正想过使用它，因为我担心旧版浏览器中的兼容性问题。但我现在看到'盒子大小的确是我神秘的答案。另外，我不得不感谢@ItaiSagi的评论，因为没有'

'在我的'ul'后面，背景没有伸展。欢呼你们俩。 –

@RickAnthony好的旧crossbrowser内部元素解决方案：http://jsfiddle.net/nrNyU/上面是问题，下面是解决方案。（也在代码中。注释行分隔。） – Joonas

@Lollero谢谢，这说明它非常好。不知道JSFiddle - 它肯定会派上用场。 –

这是胡乱猜测，因为没有联系。该div有填充？填充总是添加到div的高度，即使这个高度是100％。

来源

2011-08-10 10:24:47 daveyfaherty

不要那样做自己... 只需清除它。

将<ul>浮动到左侧或右侧，并在父div的末尾添加<div style='clear:both'>。

Behatzlacha，ahi。

来源

2011-08-10 11:10:40

哈哈哈谢谢 –

CSS - 100％高度超过100％？

回答

相关问题