在较低分辨率下，div宽度不会拉伸100％

Question

我正在为一个客户工作一个网站，我在css上并不擅长...仍然在学习很多关于div的过程。我做了一个div应该伸展100％的页面，它可以工作，除非用户从较低的分辨率（例如1024 x 768）浏览并且必须水平滚动，div才会延伸到原始浏览器窗口的长度。

再加上我的页脚表现方式相同，并且没有粘在页面底部。

代码/网站可在以下网址找到： http://cliqthis.com/temp/roadhouse/index.php

感谢您提供任何帮助，或解释为什么会发生这种情况会有所帮助，因为我仍在学习中。

Answer 1

您会看到分辨率为1024x768的滚动条，因为<div id='container'>的宽度设置为1064像素。由于这个原因，父div的最小宽度为1064。

Answer 2

我们是否在谈论黑条一直向右延伸？

你需要确保不仅那些div的宽度是100％，而且他们所有祖先的宽度也 100％。使用正常（静态）定位时，100％宽度表示元素的父级宽度的100％。

在Firefox中使用Web Developer插件，启用“轮廓当前元素”应该对确定哪些元素不是它们需要的宽度非常有帮助。 （在页面上移动鼠标，它将勾勒出你所在的元素，并告诉你css选择器的路径）。

此外，您可能希望将结构与您使用的原始模板进行比较。我觉得很奇怪，例如，你有一个空的div。＃footer元素，然后是一个table.foot元素，而不是它的内部。也许你不小心弄坏了那里的东西？

Answer 3

设置div的最小宽度。

div.class { /* ... */ min-width: ___px !important; /* ... */ }