html - 如何在带有粘性页脚的居中 3 列人造布局上收缩包裹主要内容

Question

我从 this sample CSS template 开始它提供了一个居中的 3 列人造布局的粘性页脚。 2 个侧栏是固定宽度，主要内容应该收缩包装以适应其内容的大小，而是拉伸(stretch)到包装器的 CSS 中定义的 max-width 值。主要内容被拉伸(stretch)，因为 CSS 不包含任何导致收缩包装的样式(即“display:inline”、“display:inline-block”、“float:left”、“display:table”、“display:inline-table”等)。最后，包装器包含除粘性页脚之外的所有内容。

我尝试使用 display:table 设置包装器以收缩包装主要内容，它确实这样做了，但是现在包装器 div 之外的页脚不正确宽度。它之前匹配其宽度的方式与包装器默认设置的 max-width 样式相同，该样式与包装器上的相同 max-width 样式匹配。我不是 CSS 专家，但也尝试使用另一种粘性页脚技术将粘性页脚移动到包装器内，但随后我将人造列所需的 CSS 样式与包装器内的粘性页脚所需的样式发生冲突。我不知道是否可以那样做，但从我最初的“快速”测试来看，它变得一团糟。

如果可能的话，我宁愿不使用 javascript 来调整它的大小，而是让它与 CSS 一起工作。对 CSS 有什么想法吗？

和here's a fiddle of it无需将“display:table”添加到包装器 CSS。添加它，然后问题就开始了。

Answer 1

您需要的是:Perfect 3 column它还会根据您的需要使用浏览器调整大小。