html - 複数列のレイアウトと応答性

Question

私は SO や他のサイトを広範囲に検索しましたが、実際に探しているものを正確に見つけられませんでした。きれいなコードを流動的なデザインに結び付けたいので、ALA に関するこの素晴らしい記事 [名前: multicolumnlayouts] は私を大いに助けてください。

ページ レイアウトは、ヘッダー、コンテナー (2 つの列を含む)、およびフッターという非常にシンプルなものになります。右の列にはサイト コンテンツが含まれており、高さが動的である必要があります。一方、左はサイドバーでメニューが含まれており、その高さはコンテンツと一致する必要があります。コンテンツがほとんどない場合、両方の列がウィンドウの高さの 100% に伸びる必要があります。

サイドバーの下の白い無色の領域です。サイドバーをフッターまで伸ばす必要があるだけです (例 2 を参照)。 純粋な HTML5/CSS ソリューションは歓迎されますが、単純な JavaScript も歓迎されます。HTML:

<div class="wrapper">

    <header>header H</header>

    <div class="sidebar"> sidebar S</div>

    <div class="container clearfix">

        container C 

        <div class="el">element E</div>
        <div class="el">element E</div>
        <div class="el">element E</div>
        <div class="el">element E</div>
        <!-- or more elements -->
    </div>

    <footer>footer F</footer>

</div>

例 1 (コンテンツが少ない = 問題なし): http://destadesign.com/tag/test7.html

例 2 (問題はここにあります): http://destadesign.com/tag/test7b.html

または、小さい jsfidde ウィンドウの場合: 通常の jsfiddle URL の後に「6uHp8」を追加するだけです (2 つ以上のリンクを投稿することはできません)。ありがとう！