css - 100% 宽度缩小窗口大小时不会拉伸

Question

我有一个<div>100% 宽度的页眉/页脚。如果我让寡妇足够小，以便出现水平滚动条，然后滚动到页面的最右侧，我可以看到页脚在某个点中断并留下一个空白区域，就好像它的宽度是固定的一样。

http://jsfiddle.net/enxRw/

我是否缺少任何 CSS 属性？我需要一个额外的包装<div>吗？我是否需要 JavaScript 来检查窗口宽度并进行相应调整？

编辑：

width:1024pxfor main是故意的<div>，因为它的内容是并排的 2 X 500px 图像，我不希望它们在窗口缩小时换行。

Answer 1

不要在.maindiv 上设置宽度，而是将其设置在body：

body {
    min-width: 1024px;
}

这是你的小提琴：http: //jsfiddle.net/enxRw/1/

Answer 2

是的，您可以使用包装器 div。或者您可以在 body 元素上指定最小宽度。

百分比宽度计算为父节点的百分比。在这种情况下，这是主体节点。

由于您没有在 body 节点上设置宽度，因此它被计算为视口的宽度。（您可以通过查看检查器中的主体节点来检查）