2009-02-24 19 views
38

ここに誰かが次の2列のcssレイアウトについてかなり簡単なチュートリアルを持っていたのかと思っていました。 左固定列と流体内容列(ヘッダーとフッターと列の高さが等しい)。CSSレイアウト2列固定流体

+1

私は[HTML犬](http://htmldog.com)から学んだHTMLとCSSについて知っていることのほとんど。 HTML Dogはフッター付きの2列レイアウトを作成する方法について[チュートリアルのページ](http://htmldog.com/guides/cssadvanced/layout/)を持っています。 –

答えて

1

私が使用しているのは、スクリプトを含まない偽の列レイアウトのハックです。 alistapart.com

幸運: dustinbrewer.com

ここで私が学んだから、元alistapart.comの記事があります:

は、ここでのコンセプトのシンプルな、について説明であるように思わチュートリアルです!

45

私はそれほどずっと前に発見した実際にはもっと簡単な解決策があります。 IE7にうまく戻っています。 #fluid divは固定された修正の横にスライドし、残りのスペースを占有しますが、すべての応答可能なサイトに対して大きな流動性を維持します。

http://jsfiddle.net/uEj55/1/

#fixed{ 
    width:150px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
} 
+0

列の高さを常に等しくすることは可能ですか?このデモを見ると、私は赤が見えません。 http://jsfiddle.net/louiswalch/uEj55/92/ –

+1

このソリューションは、右の固定列と左の流体が必要な場合にも効果的です。単に#fixedのためにcssをfloat:rightに変更してください。 – ctown4life

+2

これは素晴らしいことです。オーバーフロー:このコンテキストでは隠れていることを説明できますか? – IcedDante

関連する問題