css - 在窗口调整大小时调整页眉和页脚宽度

Question

我把自己逼到了一个 Angular 落，或者我正在监督这里明显的事情。我有一个设计如下的半流体 CSS 布局:

标题 - 始终为 100% 宽度，包含重复 x 次的背景图像

容器 - 流体(960 像素到 1200 像素，居中，包含两列)

页脚 - 始终为 100% 宽度，包含重复 x 次的背景图片

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

总而言之，整个设计可以缩放到任意宽度，但内容部分最多只能缩放到 1200 像素。然而，由于这涉及到一个图片网站，有时图片会比 1200px 的容器宽度更宽，并且图片会超出容器宽度。这很好，我希望显示完整图像。但是，我希望页眉和页脚缩放到最宽的元素，在本例中是图像。这没有发生，当我将窗口调整为小于图像的宽度然后使用水平滚动条向右滚动时特别麻烦:它在页眉和页脚上留下了明显的间隙，而我希望它们拉伸(stretch)到 at至少图像/内容宽度。

仅仅将宽度设置为 100% 是不够的，因为这涉及到视口(viewport)，而不是内容宽度。我可以为页眉和页脚强制使用具有较大值的最小宽度，但这会在正常分辨率下留下水平滚动条。我可以使用 overflow:hidden 隐藏该滚动条，但这会截断内容并且在窗口较小时不显示滚动条。

长话短说，我想我想要的是这种布局可以像表格一样工作:如果一列的内容比它的大小宽，它会将所有其他行推到相同的宽度。最大宽度决定总宽度。我更喜欢没有 javascript 的解决方案，但我认为这不可能，或者我正在监督一些非常明显的事情？

Answer 1

100% 宽度将元素的宽度设置为其包含的元素宽度的 100%。在您的情况下，这似乎是窗口本身(或 body 元素)。要使页眉和页脚 div(我假设您在这里使用 div)随图像缩放，它们可能需要包含在图像所在的同一个 div 中，或者包含在图像 div 所在的 div 中也在其中，假设 div 正在缩放到正确的宽度(不要假设它正在缩放以适合图像)。

但是，在许多情况下，为您的布局使用表格会更简洁，并且可以处理您正在寻找的水平缩放类型，而无需求助于 css hack。