背景重复div的溢出隐藏问题答案

【问题标题】：Overflow hidden issue with background repeating div背景重复div的溢出隐藏问题
【发布时间】：2012-02-21 21:19:31
【问题描述】：

我正在尝试使用div 将背景重复到包装器内内容高度的 100%。

我正在使用overflow: hidden 来执行此操作，但这（不出所料）会根据用户的屏幕分辨率截断内容。

删除overflow:hidden 行意味着背景不会重复，#wrapper div 不会假定内容的完整高度。

您可以在此处查看我的代码和预览 - http://jsbin.com/ikuba4/2 - 如果有人有任何建议，那就太好了！

编辑：澄清一下，问题是我需要我的 #wrapper div（其中包含垂直重复的背景图像切片）应该动态地将其高度扩展到 #inner_wrapper div 的高度 - 删除 overflow:hidden 会导致#wrapper div 根本没有扩展它的高度，而使用 overflow:hidden 将高度扩展到一个点，但随后内容被截断。

【问题讨论】：

“将背景重复到 100% 高度”是什么意思？拉伸图像？
我的意思是包含#wrapper div（包含背景图像切片）应该是其中#inner_wrapper div的全高。目前，我最接近这项工作的是使用溢出：隐藏
好的，看起来像三十点答案是你需要的吗？无论如何，在评论评论时使用@ 就像我现在通知该人一样，前三个字母就足够了。
啊好吧没意识到，谢谢@Shadow Wizard :)

标签： html css

【解决方案1】：

在#wrapper:

删除height: 100%。
删除overflow: hidden。

开启#inner_wrapper：

删除height: 100%。
添加overflow: hidden。

用 Firefox/Firebug 测试，这些步骤解决了。

这是一个fixed jsBin，它正在执行与这些步骤相同的操作。

编辑：
正如@Marnix 在他的回答中指出的那样，您还应该从#outer_container 中删除height: 100% - 我认为没有必要在那里。

【讨论】：

感谢@thirtydot - 完美运行。我错误地认为对于这种类型的布局，我需要将所有包含外部的 div 设置为 height: 100%，但显然不是这样 :)

【解决方案2】：

有点不同，也可以：

#outer_container

删除height: 100%

#wrapper

删除height: 100%

#inner_wrapper

删除height:100%
添加overflow:auto

【讨论】：

+1 表示注意到 #outer_container 上的无用 height: 100%。