スティッキーフッターの問題、幅広いブラウザ対応の2列レスポンスレイアウト

Question

難しいレイアウト上の問題があります。私は、次のレイアウトを作成する必要があります

1. 二つの等しい高列
2. スティッキーフッター
3. 応答（左パネルカラムを100％に崩壊（光含量の底部に位置する、重い内容のページを押し出さ）
モバイルブレークポイント）
4. ワイドブラウザのサポート（ダウンIE9だけでなく、モバイルデバイスにサポートする必要がある）

デスクトップレイアウト：

モバイルレイアウト：

私は本当に唯一一部私のニーズのために解決し、このおよびそれらのすべてのために多くのソリューションに見てきました。まだ完全な解決策が見つかりませんでした。これらのソリューションの多くはフレックスボックス、CSSグリッド、またはCSSテーブルを使用しており、IE9はポリフィルなしのものをサポートしないため、聖杯でさえありません（私はでしたが、レイアウトは？でした）。

私はこれらのうち誰かがこれを理解したと確信しています！

http://csslayoutgenerator.com/

は、私はあなたが記述しているように粘着性のフッタにレイアウトを作成することができました：

Answer 1

あなたはCSSLayoutGeneratorを試してみてください。

Answer 2

私はこれにCSSフレックスボックスを使用して解決しなければならないでしょうし、Flexibilityのようなポリフィルを使用してIEの古いサポートを得ることができます。

フレックスボックスを使用しています。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>

古いIEでサポートされていることができ、純粋なCSSで解決策を見つけるためにいいだろうが、私は特に、それは余分なコードの膨張がそこに価値はないことを考えていますユーザーの割合が低い