【问题标题】：Problems with the footer; When I resize the window there's a large whitespace to the right页脚问题；当我调整窗口大小时，右侧有一个大空白
【发布时间】：2012-09-15 02:59:15
【问题描述】：

好的，这已经困扰了我几个小时，我不仅无法解决这个问题，而且我不明白为什么会这样（公平地说，现在是早上 6 点 @_@）。无论如何，所以我试图让页脚连续，一个简单的颜色。页脚内容由几个不同宽度的垂直框组成。我正在使用带有列表的无序列表来完成此操作。

http://jsfiddle.net/WTABE/

当浏览器最大化时一切正常，但是当我调整它的大小时，会出现一个水平滚动条，当你向右滚动时，页面会被切断，更右边是一个很大的空白。

现在，每当我在 #footerContect ul {} 中取出宽度时，这个问题就会消失，但列会自行脱离中心。即使我自己调整 li> 内容的各个宽度，它对空白的大小也几乎没有影响。即使我将 li> 组件的宽度缩小到 50px 并将 UL 宽度缩小到 500px（我这样做是为了看看会发生什么），空白仍然存在！

这里一定有我遗漏的东西，因为我还尝试将 li> 的边距和填充设置为零，它们都混合在一起，但空白仍然存在。

【问题讨论】：

好的。好吧，这很尴尬....我只是拿出来-- #footerContent #LIquicknav {width:100px;} #footerContent #quicknav li {float:none; width:150px;} 它工作 O_O;;我仍然很好奇为什么把这两个拿出来修复它。他们似乎突然增加了一千个额外的像素。
我把它缩小到这行代码--- float:none;除了从#quicknavli 中删除之外，我保留了其他所有内容。我尝试了 float:right ，它似乎与 float:none; 具有相同的空白效果！我尝试了 float:left 并且空白消失了.... float:none = float:right;?
你可以在你的小提琴中添加 html 代码吗？ :)
很乱！ jsfiddle.net/WTABE/2 呃，说实话，代码很丑。我需要做得更好>.

标签： html css

【解决方案1】：

好的。所以我发现它与浮动有关，我只是从以下位置取出浮动：

footerContent #quicknav li {float:none;宽度：150px;}

现在它在 chrome 上看起来很完美。

但是 IE 和 Firefox 确实给我带来了问题。如果您调整浏览器的大小，页脚会调整并卡住......就像当您使用水平栏向右滚动时，您会将页脚留在您离开它的位置。靠左。还有一些奇怪的额外空白再次发生。这无疑与更多的浮动有关（尝试在所有元素上设置边框，并一次消除一个 DIV 部分，直到大部分空白消失）。

这家伙没有使用浮点数，但这就是我的浏览器在 IE 或 Firefox 中的外观： css white-space:nowrap horizontal scroll bug

【讨论】：

好的，我通过输入 min-width:960px; 解决了这个问题在页脚背景上，但我不满意，因为我不知道为什么会这样。好吧，我有点做...但是我不明白为什么这样做有效，而降低宽度却没有，降低宽度与说最小宽度基本相同吗？而且，我认为这是一个浮动/折叠问题。容器 DIV 没有调整到浮动元素的大小，因为它们一开始就脱离了正常流动。我会尝试用另一种更漂亮的方式来解决这个问题。

footerContent #quicknav li {float:none;宽度：150px;}​

footerContent #quicknav li {float:none;宽度：150px;}