我正在为一个客户重建一个页面 - 由作者删除 - (它在希伯来语中,但这是无关紧要的).
我的页脚有一些CSS问题(灰色背景) - 我希望灰色背景符合该框内的内容 - 所以如果列表增长,背景div的高度会增加,如果列表缩小,那么背景.我知道这可以达到100%的高度,我知道这个概念的基础知识.我知道父容器也必须设置为100%高度,这样背景就会伸展.
但是如果你看看我链接到的页面上的页脚,以及它所在的2个容器,它的伸展距离应该更远(使用Web Developer Toolbar可以看到每个容器的高度).此外,它的容器似乎设置在不同的高度,即使它们也应该根据内容进行拉伸.
我尝试将高度,最小高度,清晰度和定位设置放在任何地方 - 我只是无法让它正常工作.
我知道整个"CSS 100%身高"问题很常见.相信我,我已经阅读过并且我已经搜索了同样问题的人 - 但我一无所获.
填充,边距和边框不计入高度和宽度,因此每侧10px填充的元素上的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