2012-03-27 4 views
1

this sample CSS templateから始めて、中央に3列のフォールスレイアウトを持つ固定フッターを用意しました。 2つのサイドカラムは固定幅で、メインコンテンツはコンテンツのサイズに合わせてシュリンクラップされるが、代わりにラッパーのCSSで定義されたmax-widthの値に伸びている。主なコンテンツは、CSSにシュリンクラップを引き起こすスタイル(「display:inline」、「display:inline-block」、「float:left」、「display:table」、「display:inline-table」など)が含まれていないために伸びています。最後に、ラッパーには固定フッター以外のすべてが含まれています。中央の3列のフェードレイアウトでメインコンテンツをラップする方法スティッキーフッターで

display:tableでラッパーを設定して、メインコンテンツのラップを縮小しましたが、ラッパーdivの外にあるフッターの幅が正しくありません。以前はラッパーと同じ方法で幅が一致していましたが、これはデフォルトでmax-widthスタイルに設定されていました。これはラッパーの同じmax-width sytleに一致しました。私はCSSのエキスパートではありませんが、代わりにスティッキーフッタ技法を使ってラッパーの内側でスティッキーフッタを移動しようとしましたが、ラッパーの内側にスティッキーフッタを持つために必要なスタイルでフォールスカラムに必要なCSSスタイルを衝突させました。私はそれがそうすることができるかもしれないことは分かっていませんが、私の初期の "速い"テストから、それは乱雑になりました。

javascriptでサイズを変更するのではなく、可能であればCSSで動作させることをお勧めします。 CSSのアイデアは?

およびhere's a fiddle of it "display:table"をラッパーCSSに追加しないでください。それを追加すると問題が始まります。

+0

コードを操作すると参考になります。 – mikevoermans

+0

@mikevoermans完了、上記のフィドルを参照してください。 – johntrepreneur

答えて

0

必要なものは次のとおりです。Perfect 3 column broswerで必要に応じてサイズを変更します。

関連する問題