HTML、CSS、960.gsのフレキシブルな全幅の背景

Question

私はデザインにトリッキーな要素を持つ一連のHTMLテンプレートのフロントエンドビルドに取り組んでいます。

あなたがのscreengrabからわかるように、メインナビゲーションは子ページとセクションは、このように柔軟にメニューの高さを必要とする存在リンクのネストされたリストが含まれています垂直リストです。

デザインには、背景、ヘッダー、中央、メインナビゲーションの下から下に向かって幅の広いストライプがあります。これは、ブラウザーの全幅に渡る濃い青色の背景がフレキシブルで、メインナビゲーションの高さの変化に伴って変化する必要があるため、統合するのが難しいことを証明しています。

私はCSSトリックから次のソリューションを実装しようとしましたが、IEのさまざまなバージョンでさまざまな問題を引き起こしています。

JavaScriptを使用してメインナビゲーションの高さを決定することによって高さが設定された空白の絶対配置されたコンテナを作成することを検討していますが、ページの読み込み時のレイアウトのジャンプやブラウザの互換性を再度心配しています。

これにアプローチする方法に関するその他の提案はありますか？

Answer 1

純粋なCSSブーではなく、クリアフロートで行うことができます。基本的には、ナビゲーションとコンテンツをラップし、コンテンツを浮かべるdivを持つことです。ラッパーはではなく、はoverflow:hiddenです。浮動小数点はフッターでクリアされます。

Fiddle。

テスト済みのFF4、Opera 11.50、およびChrome 12. IEを手元に置いていないが、正常に動作するはずです。