CSS - 100% 高度是否超过 100%？
我正在为客户重组一个页面，地址为 -removed byauthor-（它是希伯来语，但这无关紧要）。
我在页脚（灰色背景）方面遇到了一些 CSS 问题 - 我希望灰色背景能够根据该框中的内容进行调整 - 因此，如果列表增长，背景 div 的高度就会增加，如果列表缩小，那么背景。我知道这可以通过 100% 高度来实现，并且我了解这个概念的基础知识。我知道父容器也必须设置为 100% 高度，这样背景就会拉伸。
但是，如果您查看我链接到的页面上的页脚以及它所在的 2 个容器，您会发现它向下延伸的距离比应有的远得多（使用 Web 开发人员工具栏您可以看到每个容器的高度）。此外，它的容器似乎设置在不同的高度，尽管它们也应该根据内容进行拉伸。
我尝试在任何地方放置高度、最小高度、清晰和定位设置 - 我只是无法让它正常工作。
我知道“CSS 100% 高度”这个问题很常见。相信我，我已经阅读并搜索过有同样问题的人 - 但我什么也没找到。
I'm restructuring a page for a client at -removed by author- (it's in Hebrew, but that's irrelevant).
I'm having some CSS problems with the footer (gray background) - I want the gray background to fit according to the content inside that box - so if the list grows the background div's height increases, and if the list shrinks, so does the background. I know this can be achieved with 100% height, and I know the basics of the concept. I understand that the parent containers must be set to 100% height as well, and that way the background will stretch.
But if you look at the footer on the page I linked to, and the 2 containers it's in, it's stretching down much farther than it should (using Web Developer Toolbar you can see each container's height). Also, it's containers seem to be set at different heights, even though they should also be stretching according to the content.
I tried putting height, min-height, clear and positioning settings everywhere - I just can't get it to work right.
I know the whole "CSS 100% height" question is pretty common. Believe me, I've read and I've searched for someone with this same issue - but I found nothing.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
内边距、边距和边框不计入高度和宽度，因此每侧内边距为 10px 的元素的 100% 高度或宽度实际上将占用 100% 加 20 像素。如果您使用边距和边框，则可以添加更多。
解决这个问题的方法是使用 CSS
box-sizing:border-box;属性，它允许您切换盒子模型，以便考虑边框和填充（边距仍然保留在盒子之外） ，所以如果您使用 100%，则不要使用边距）。这有效地使盒模型以与旧的 Quirks 模式盒模型相同的方式工作。
在此处了解有关
box-sizing功能的更多信息：http://css -tricks.com/box-sizing/box-sizing具有相当好的跨浏览器支持，但请注意，它在 IE7 或更低版本中不起作用，并且需要供应商前缀一些浏览器。在此处查看有关浏览器支持的更多信息：http://caniuse.com/#search=box-sizing< /a>
Padding, margin and borders are not counted in the height and width, so 100% height or width on an element with 10px padding on each side will actually take up 100% plus 20 pixels. And add even more if you're using margin and borders.
The way around this is to use the CSS
box-sizing:border-box;property, which allows you to switch the box model so that borders and padding are taken into account (margin still remains outside the box, so if you're using 100%, don't use margins).This effectively makes the box model work in the same way as the old Quirks Mode box model.
Find out more about the
box-sizingfeature here: http://css-tricks.com/box-sizing/box-sizinghas fairly good cross-browser support, but note that it doesn't work in IE7 or below, and requires a vendor prefix for some browsers.See more about the browser support here: http://caniuse.com/#search=box-sizing
这是一个疯狂的猜测，因为没有链接。 div 有内边距吗？填充总是添加到 div 的高度，即使该高度是 100%。
This is a wild guess, because there's no link. Do the divs have padding? Padding is always added to a div's height, even that height is 100%.
不要这样对自己...
只要清除它即可。
将
向左或向右浮动，并在父 div 末尾之前添加。Behatzlacha，啊嗨。
Don't do that to yourself...
Just clear it.
float the
<ul>'s to the left or right, and add a<div style='clear:both'>right before the end of parent div.Behatzlacha, ahi.