粘腳，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列響應式佈局與廣泛的瀏覽器支持問題

回答

相關問題