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

Question

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

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

桌面布局：



移动布局：



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

我确信有人已经弄明白了这一点！

Answer 1

您应该尝试 CSSLayoutGenerator ：

http://csslayoutgenerator.com/

我能够像您所描述的那样使用粘性页脚创建布局。

Answer 2

我将不得不决定使用CSS flexbox，然后使用像Flexibility之类的polyfill来获得较旧的IE支持。

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

＆＃13;

＆＃13;

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;}	
}

＆＃13;

<!-- 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>

＆＃13;

＆＃13;

＆＃13;

很高兴找到一个纯CSS的解决方案可以得到老版IE的支持，但我认为它不值得额外的代码膨胀到那里，特别是对于较小的百分比用户。