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

我有一个具有挑战性的布局问题。我需要创建如下的布局：粘脚，2列响应式布局与广泛的浏览器支持问题

两个相等的高度列
置顶页脚
响应（左侧导览列合拢为100％（定位在光内容底部，在重内容推离页）在移动断点）
宽浏览器支持（需要支持到IE9，而且移动设备）

桌面布局：

Desktop Layout

移动布局：

Mobile Layout

我看着这个和所有的人都很多解决方案实际上只解决我需要一些。尚未找到完整的解决方案。甚至没有圣杯，因为许多这些解决方案使用flexbox，css网格或css表格，IE9不会支持那些没有polyfill（我可以可以做的，但布局?!）。

我确定有人知道这些了！

来源

2017-05-16 John Rotondo

为什么不看这bootstrap？这就是它的原因。 :) –

你使用的是什么版本的grails？ – elixir

Elixir，我没有使用Grails。这是在一个Java/Angular2应用程序。我指的是这份A List Apart文章中提到的圣杯布局： https://alistapart.com/article/holygrail –

你应该尝试CSSLayoutGenerator：

http://csslayoutgenerator.com/

我能有粘稠页脚创建布局像你所描述。

来源

2017-05-16 18:30:49 trevorp

这是一个体面的工具，但它无法实现我所有的要求。对于页脚，它可让您在“将页脚保留在浏览器窗口底部”或“模拟等高栏”之间进行选择。我需要两个。 –

你应该能够实现这与CSS：http://stackoverflow.com/a/19220042/1839504 – trevorp

这也行不通。内容不会将页脚推到页面下方。相反，页脚覆盖内容，迫使其在页脚后面滚动。 –

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

以下是使用Flexbox的Codepen。

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

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

这将是很好找纯CSS的解决方案，可以通过旧的IE浏览器的支持，但我认为这是不值得额外的代码膨胀到那里，尤其是对于较小比例的用户。

来源

2017-05-17 19:36:53

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

回答

相关问题