2011-10-20 2 views
2

私はこのサイトのフッターに少し問題があります。私はそれが解像度に関係なく、ページの下部に設定された最小の高さと流れを探しています。私はそれがコンテナdivの最後に突き当たることを望みます。CSSの問題 - フッターが長すぎますか?

最新のブラウザ(Safari、Chrome、IE、Firefox)では、問題は一貫しています。

ここに投稿するCSSが多すぎますが、Firebugまたはビューソースには対応するスタイリングが表示されます。どんな助けでも大歓迎です。フッターの100%の高さを指定する

http://034732e.netsolhost.com/gdlsk_joomla/

+0

あなたはより具体的なことはできますか?私はそれにいくつかの内容を持つ明るい灰色のフッターを参照してください。ライトグレーはページの下部に流れますか?どこで何をしたいですか?ライトグレーの下部にあるテキストは?明るい灰色の領域はそれほど大きくないのですか?スクリーンショットはたくさんの助けになります)。 – mrtsherman

+0

フッターのサイズが問題です。どのブラウザでも693pxですどのくらいの大きさであっても、フッタをブラウザウィンドウの一番下まで埋めるだけです。 –

+0

http://imgur.com/XOC6c - 高さが150pxに設定されたページのショットです。ページの残りの部分を大規模なブラウザの下に拡大するようにしたいと思っています。それがなぜ機能していないのか分かりません。 –

答えて

2

感謝を。あなたの説明は今より意味をなさない。私は次のようにします。今私はこのような何か

<body height: 100%;> 
    <page height: 100%; background: gray;> 
     <header background: black; /> 
     <bodycontent background: black; /> 
     <footer /> 
    </page> 
<body> 

を検討する

<body> 
    <page> 
    <header /> 
    <bodycontent /> 
    </page> 
    <footer /> 
<body> 

のようなものは、基本的に我々は何をすべきか、本体とページは、彼らが画面全体を取ることを100%に設定されています。ページはフッターと同じbgカラーを使用します。最後に、headerとbodycontentを黒の背景に設定して、ページのグレーを覆います。私は同様の問題を抱えていた

+0

私はあなたの考えが好きです。問題を回避するためにバックグラウンドを使用することも考えていました。問題は、そのページに透明なpngがあることと、表示する必要があるストライプされた背景があることです。 –

+0

それを二重に折り返す必要があります。または、javascriptを使用します。 CSSはあなたが望むようにスマートではありません。そこで 'page'を別のラッパーの中に置きます。このラッパーは灰色の背景を持ち、あなたのスタイルの背景をページに適用します。あなたがスタイルの背景を特徴とするために全身を必要とするなら、私はあなたがCSSの面で不運であると思います。 – mrtsherman

+0

スーパーハック賞はTシャーマンさんに贈られます!先端に感謝します。私が探していた理想的な解決策ではありませんが、それは機能します。私がテストしたすべてのブラウザに渡って再度、感謝します。 –

0

は、あなたはそれがないと思う何をしていません。高さを身体の100%にしたいと言っているだけで、残りのスペースを "拡張する"だけではありません。それは実際には100%の高さに加えて、あなたが追加したすべてのものです。これは最低150px以上の高さを達成しています。

+0

私はそれをautoに設定しようとしましたが、画面の下部に流れません。 –

0

これがあなたに変更してみてくださいは、CSS:スクリーンショットのための

body > #page { 
height: 100%; 
} 

@#footer: remove-> property top:0; 
add-> property bottom:0; 
+0

私はそれをautoに設定しようとしましたが、画面の下部に流れません。誰もがこれを大きな解像度のモニターで確認できますか? –

+0

私はいくつかの変更を加えて私の答えを編集してくださいこれも試してみてください。 – punit

+0

@#フッター:削除 - >プロパティトップ:0; add-> property bottom:0; このコードは、私のCSSの残りの部分を台無しにしています。それは特定の方法でフォーマットされる必要がありますか?おそらく括弧内に? –

0

、それは次のようになります。

HTML

<footer id="wrapper" class="main_footer"> 
    <nav> 
     <a href="#">A</a> 
     <a href="#">B</a> 
     <a href="#">C</a> 
    </nav> 
</footer> 

CSS

#wrapper { 
position: absolute; 
width: 100%; 
} 
関連する問題