粘性页脚问题，具有广泛浏览器支持的 2 列响应式布局

Question

我需要创建以下布局：

两个等高的列
粘性页脚（在轻内容中位于底部，在重内容中被推离页面）
响应式（左侧导航栏在移动断点处折叠到 100%）
广泛的浏览器支持（需要支持低至 IE9 以及移动设备）

桌面布局：

移动布局：

我为此研究了很多解决方案，所有这些解决方案实际上只解决了我的一些需求。还没有找到完整的解决方案。甚至不是圣杯，因为其中许多解决方案使用 flexbox、CSS 网格或 CSS 表，而 IE9 将不支持没有 polyfill 的那些（我可以做，但布局？！）。

Answer 1

你应该试试 CSSLayoutGenerator:

http://csslayoutgenerator.com/

我能够像您描述的那样创建带有粘性页脚的布局。

Answer 2

我将不得不为此使用 CSS flexbox，然后使用像 Flexibility 这样的 polyfill 来获得旧的 IE 支持。

这是一个有效的 Codepen，使用 Flexbox。

html, body {
 margin:0;
 padding:0
}
.wrap {
 display: flex;
 min-height: 100vh;
 flex-direction: column;
 max-width:1200px;
  margin:auto;
}
.main {
 flex: 1;
 display:flex;
}
footer, header {
 background:green;
 padding:10px;
}
.sidebar {
 background:blue;
 flex:0 0 300px;
 padding:10px;
}
.content{
 background:yellow;
 padding:10px;
 flex:1; 
}
@media screen and (max-width:680px){
 .sidebar{flex: 0;order:0}
 .main {flex-direction:column;} 
}

<!-- could use body element instead of wrap if wanted -->
<div class="wrap">
  <header>Header</header>
  <main class="main">
    <div class="sidebar">Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar Sidebar </div>
    <div class="content">Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content </div>
  </main>
  <footer>footer - <a target="blank"  href="http://codepen.io/paulobrien/full/FKAxH/">See display table version of sticky footer</a></footer>
</div>

很高兴找到一个可以被旧版 IE 支持的纯 CSS 的解决方案，但我认为不值得为此付出额外的代码膨胀，尤其是对于较小的百分比用户数。

粘性页脚问题，具有广泛浏览器支持的 2 列响应式布局

Trouble with sticky footer, 2 column responsive layout with wide browser support

html

css

responsive-design

internet-explorer-9

sticky-footer