具有动态粘性页脚的站点布局，可以在没有 JS 的情况下返回到 IE6：这可能吗？

Question

要求很简单：创建一个具有动态粘性页脚的网站布局（即，当内容未填满整个视口时，动态高度的页脚会粘在视口底部，但它位于内容下方，当内容超出视口高度时不会立即可见）在浏览器中回到 IE6 并且不需要 JS hack 即可工作。
这可能吗？

老实说，我不介意我是否必须使用 table 来进行布局，但我正在寻找的是下面的布局，它适用于 IE6，当然也适用于所有现代浏览器。在下面的图片中，橙色是页眉，绿色是内容，紫色是页脚。

我已经尝试过许多带有 div 和 tables 的布局，但我想不出有什么可以让它在旧的 IE、Firefox 等中工作。任何帮助将不胜感激.
谢谢。

Answer 1

这是您需要添加到 css 中的内容：

html,body{width:100%;} //This makes sure the body takes up 100% of the window
.wrapper{min-height:100%; margin-bottom:-/*height of footer*/px;}
.push{height:/*height of footer*/px;}
.footer{height:/*height of footer*/px;}

用class="wrapper"将所有绿色部分包裹在div中，并在底部添加<div class="push"></div>以防止绿色区域溢出到紫色区域（因为负面保证金）。

Answer 2

动态调整大小的粘性页脚很难，因为您还需要动态调整主要内容视图的大小，以便滚动正常工作，但 CSS 不是动态编程语言。

我认为最接近当前 CSS（"current" 当然完全排除 IE6）的方法是使用百分比。百分比的问题是页脚不会根据页脚的内容动态调整大小，它会根据您对要使用的百分比值的最佳猜测调整大小。不会让人满意。

你说你想避免 JavaScript "hacks," 但是你几乎可以肯定地用 JavaScript 来解决这个问题，将页脚设置为绝对定位，并固定底部位置为 0（零），并编写一个事件处理程序来检测页脚高度的变化并适当调整主要内容的大小 window。

我不知道我会在贬义上称它为 "hack"。它只是代码，做你告诉它做的事。当然，如果您尝试实施的公司（或其他）政策不允许使用 JavaScript，那就是另一回事了。鉴于 14 岁的 IE6 在游戏的这个阶段是多么的安全讽刺，我实际上是支持禁用 JavaScript 的人之一。但是，当然，这排除了能够部署 "app." 的任何远程现代传真机当然，所谓现代，我只是指我在 20 多年来为胖客户端应用程序设计的用户友好反馈类型以前，并且自 "Web 2.0" 网络标准时代以来，这在网络浏览器中才真正成为可能。 IE6，当然，甚至早于那个。

完全支持 IE6 可能是一项艰巨的任务。

您确定不能指定您的应用需要运行在现代浏览器上运行吗？ Chrome 和 Firefox 的最新版本仍然可以安装在 Windows XP 上，任何不相信新版本 Chrome 或 Firefox 的人都比旧版本安全得多，错误-千疮百孔的IE6是在自欺欺人。话说回来;如果您仍然运行ning Windows XP，那么您将面临非常严重的安全问题。

Answer 3

旧式 HTML table 布局是可能的。以下代码应该在 IE6 中工作。

html, body, table { height: 100%; }
table { width: 100%; }
td { vertical-align: top; }
.header { background-color: orange; }
.main {
  background-color: green;
  height: 100%;
}
.footer { background-color: purple; }

<table>
  <tr>
    <td class="header">1</td>
  </tr>
  <tr>
    <td class="main">2</td>
  </tr>
  <tr>
    <td class="footer">3</td>
  </tr>
</table>

对于较新的浏览器，您可以对 CSS tables 执行相同的操作。

html, body, .table { height: 100%; }
.table {
  display: table;
  width: 100%
}
.row { display: table-row; }
.cell {
  display: table-cell;
  vertical-align: top;
}
.header { background-color: orange; }
.main {
  background-color: green;
  height:100%;
}
.footer { background-color: purple; }

<div class="table">
  <div class="row">
    <div class="cell header">1</div>
  </div>
  <div class="row">
    <div class="cell main">2</div>
  </div>
  <div class="row">
    <div class="cell footer">3</div>
  </div>
</div>

具有动态粘性页脚的站点布局，可以在没有 JS 的情况下返回到 IE6：这可能吗？

Site layout with dynamic sticky footer that works back to IE6 with no JS: Is it possible?

html

css

html-table

dynamic

sticky-footer