Fatal编程技术网
  • html/
  • Html 如何在带粘性页脚的居中3列人造版面上收缩包装主要内容

Html 如何在带粘性页脚的居中3列人造版面上收缩包装主要内容

html css

Html 如何在带粘性页脚的居中3列人造版面上收缩包装主要内容,html,css,sticky-footer,multiple-columns,Html,Css,Sticky Footer,Multiple Columns,我从一开始就提供了一个带有中间3列人造布局的粘性页脚。两个边栏的宽度是固定的，主要内容应该进行收缩包装，以适应其内容的大小，但实际上是延伸到CSS中为包装定义的max width值。主要内容正在扩展，因为CSS不包含任何导致收缩包装的样式（即“display:inline”、“display:inline block”、“float:left”、“display:table”、“display:inline table”等）。最后，包装器包含除粘性页脚之外的所有内容 我尝试使用display:t

我从一开始就提供了一个带有中间3列人造布局的粘性页脚。两个边栏的宽度是固定的，主要内容应该进行收缩包装，以适应其内容的大小，但实际上是延伸到CSS中为包装定义的
max width
值。主要内容正在扩展，因为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有什么想法吗

并且不向包装CSS添加“display:table”。添加这些，然后问题就开始了。

您需要的是：它还可以根据您的需要调整broswer的大小。

修改代码会很有帮助。@mikevoermans完成，请参阅上面的fiddle。