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

Question

我有一个具有挑战性的布局问题。我需要创建以下布局：

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

桌面布局：

移动布局：

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

我敢肯定，这些人已经解决了这个问题！

Answer 1

您应该尝试CSSLayoutGenerator：

http://csslayoutgenerator.com/

我能够创建一个带有粘性页脚的布局，就像你描述的那样。

Answer 2

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

这是一个使用 Flexbox 的工作Codepen。

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 解决方案会很不错，但我认为不值得为此付出额外的代码膨胀，尤其是对于一小部分用户而言。