调整窗口大小调整页眉和页脚宽度

Question

我已经将自己编码到了一个角落，或者我正在监视某处明显的东西。我有一个是这样设计的半流体CSS布局：

头 - 在所有时间100％的宽度，包含一个的x重复的背景图像

容器 - 流体（960像素到1200像素，居中，包含两个列）

注脚 - 在任何时候都100％的宽度，包含了X-重复背景图像

在几乎所有情况下能正常工作。

总之，设计作为一个整体可以适应任何宽度，但内容部分最多只能达到1200像素。但是，由于这涉及到照片网站，因此有时图像比容器宽度为1200px更宽，图像突然出现。这非常好，我想要显示完整的图像。但是，我希望页眉和页脚可以缩放到最宽的元素，在这种情况下是图像。这种情况并没有发生，当我调整窗口的宽度小于图像的宽度时，使用水平滚动条滚动到右侧时，它并没有发生，特别麻烦：它使页眉和页脚都留下了明显的间隙，而我希望它们伸展到至少图像/内容宽度。

只需将宽度设置为100％是不够的，因为它涉及视口，而不是内容宽度。我可以强制使用最小宽度的页眉和页脚的大值，但在正常分辨率下留下水平滚动条。我可以使用overflow隐藏滚动条：隐藏，但是当内容很小时，会遮住内容并且不显示滚动条。为了长话短说，我想我想要的是，这种布局可以像表格一样工作：如果一列的内容比它的大小宽，它会将所有其他行的宽度推到相同的宽度。最大宽度决定总宽度。我更喜欢没有JavaScript的解决方案，但是我认为它不是可能的，或者我正在监督非常明显的事情？

Answer 1

100％宽度将元素的宽度设置为元素宽度的100％。就您的情况而言，它似乎是窗口本身（或body元素）。为了使页眉和页脚div（我假设你在这里使用div）与图像一起缩放，它们可能需要被包括在图像所在的同一个div中，或者在div的图像div也在，假设div缩放到正确的宽度（不要认为它缩放以适应图像）。

但是，在许多情况下，使用表格进行布局可能会更清晰，并且会处理您正在查找的水平缩放类型，而无需诉诸css hacks。

Answer 2

为了使长话短说，我想 什么，我想的是，这种布局将 工作作为表将工作

显示：这些因素的共同的容器，并显示在表：在其子项上的表格行或表格单元格。这在IE6中不起作用，但聪明的事情可以通过它的CSS表达式（）来模拟。

但是，我宁愿建议您根本不要设置最大宽度，并根据用户所需的窗口大小让设计更好地流动。