javascript - HTMLでレスポンシブな左側の列を作成する方法

Question

2 行 (ヘッダーとフッター) 1 列 (左側) と 1 つのメイン コンテンツ div レイアウトを使用しています。

それはロックハードレイアウトです。

Ajaxを使用してデータをフェッチすると、データと左バーもストレッチしてフッターに接続する必要があるため、メインコンテンツのdivがストレッチされますが、そうではありません。

並べ替えでは、左側のサイドバーの応答性の高い高さが必要です。

画像は以下

データなし

データ付き

前もって感謝します。

Answer 1

これはどうですか？

サンプルコード

.header{background:red; display:block; color:#fff; padding:20px}
.container{display:table; width:100%}
.sideBar{background:blue; width:23%; color:#fff; padding:20px; display:table-cell; vertical-align:top;}
.bodyContent{background:yellow; padding:20px; display:table-cell; vertical-align:top;}
@media(max-width:760px){
  .container,.sideBar,.bodyContent{display:block; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box}
}

デモhttps://jsfiddle.net/gjp0jfkL/2/