min-height:100% を使用して、コンテンツ領域を伸ばして画面の残りの % を埋めようとしましたが、単純に困惑しています。どんな助けでも大歓迎です。
画面上部に 3 つの固定高さ div と 1 つの固定高さフッターがあります。次に、高さが固定されていない部分がある別の div を作成します。これが「コンテナー」div です。ここには、コンテンツとサイドバー div の両方があり、少なくとも画面の 100% まで拡大し、コンテンツに合わせて拡大します。
http://jsfiddle.net/P3Ckk/110/
ありとあらゆる助けをいただければ幸いです。それは私を立ち往生させました。
灰色の背景を#conatinerWide設定しましたが、残りの領域を埋めるために引き伸ばしたいと思います。
事はhtml、bodyあなたが持っているコンテンツに合わせて十分に大きくなるだけです. したがって、これらを 100% に設定すると、ドキュメント ウィンドウをいっぱいにするように指示されます。#containerWide100% 使用可能なスペースになるようにします。
追加html, body { height: 100%; }すると、あなたが望むものを達成する必要があります
http://jsfiddle.net/rtgibbons/P3Ckk/111/
コメントの更新。
をウィンドウのサイズにしたいすべての要素に対して、親要素min-height:100%に設定する必要があります。height:100%だから#containerWide必要height:100%と#container必要min-height:100%; height:100%;。今楽しい部分。と で同じパターンを実行する#exsiと#cont、 は の高さに#containerなり、 で必要なスペースに合わせて調整されません#foot。
これが私が続けたい場所です
http://jsfiddle.net/rtgibbons/P3Ckk/113/
基本的に、min-height:100%; height:100%すべての親要素を設定しました。私は引っ越し#footた#containerので、列でいっぱいになります。次に、合計の高さのいくつかの負のマージンボトムを適用#footして、内部に吸い上げられるようにしました#containerWide
2 つの注意事項。
#exsiであり#cont、過去に拡大する#containerWideため、それらを削除し、必要に応じて内部要素またはさらに別のラッパーに適用しました。#containerWide。これは、あなたが理解するための演習として残しておきます。