2012-01-12 11 views
0

これで問題は私がヘッダー、フッターとコンテンツdivを持っていること、そして私が望むものがコンテンツdivのためにヘッダーフッタがページの下部またはコンテンツの長さを下回るようにするフッター。私たちのサイトのCSSコンテンツエリアがスクロールしていないとき

incard.com.auにアクセスすると、コンテンツ領域がブラウザウィンドウより小さくなるため、インデックスページの問題が表示されるので、フッタ浮動問題を解決するためにdivに高さを追加しました。

私はjqueryの

$('#sitewidth').css({'height':(($(document).height())-320)+'px'}); 
     $('#contentbody').css({'height':(($(document).height())-320)+'px'}); 
+0

フッターを固定しますか? – j08691

答えて

0

.sitewidthの内側持って、それはやっていますコンテンツ全体の高さが正しく画面に収まるようにするためには、フッタとヘッダーの高さをブラウザの画面サイズから外してコンテンツ本体の最小サイズを指定した数学を行う必要がありました。それは各ユーザーの画面サイズで異なるので、それはjavascriptセット関数でなければならなかった。

0

を使用してそれを修正削除:ブラウザウィンドウがdiv要素の高さよりも小さい場合に発生することになっているものだから、#contentbody

+0

はい、私たちの画面には、オレンジの国境が止まっていて、フッタにはまったく行きません。 – RussellHarrower

+0

私はあなたが言ったことをしました。 – RussellHarrower

0

から「最小高さ700px」を?

セントラルディビジョンの高さを100%に設定できます。たとえば、コンテンツdivを100%にし、上下の固定高さを作成します。それはちょっとしたハックですが、時には私は思っています - 100%は固定された高さの上下を圧縮しません - それは100%にしようとします。

私が不明な点は、ブラウザのウィンドウを小さくするとどうなるかということです。コンテンツ領域が小さくなったり小さくなったりしても、ヘッダーとフッターはブラウザの上部と下部に接着された状態になっていますか?

+0

ウィンドウのサイズが小さい場合、ユーザーはスクロールする必要があります。しかし、ユーザーの画面サイズが大きい場合は、内容が次のように表示され、オレンジ色の境界線が表示されます。 – RussellHarrower

0

私が見る唯一の問題は、コンテンツがフッターに届かないと、コンテンツ領域の両側にあるオレンジ色の境界がページの途中で停止することです。

それは、これらのオレンジ色を作るために、この問題を解決する最も一般的な方法は、背景画像に隣接し、それが繰り返し-yの私はJavascriptを使用してソリューションを修正することができました

+0

はい、それは方法かもしれませんが、私は本当に簡単な方法であると思うので、それをしたくないのですか?私が必要とするのは、コンテンツがブラウザーより小さく、高さが適合するようにすることです。 – RussellHarrower

+0

私が記述した方法は、純粋なCSSを使う唯一の良い方法であり、今日のブラウザではうまくサポートされています。 'CSS flexible box model module'は動作しますが、IEではサポートされていません。 'overflow:hidden'と' margin-bottom:-99999em;を組み合わせて使うこともできます。 padding-bottom:99999em; '、しかし、それは常に信頼できるとは限らず、単にバックグラウンドイメージを使用するよりもはるかにハックです。 –

+0

または私はちょうどJavascriptを使いました。 – RussellHarrower

関連する問題