2011-01-26 14 views
8

私はHTMLページに有効なクロスブラウザのソリューションを探しています:フルスクリーン垂直中心HTMLページの方法ですか?

  1. オーバフローなしで消費し、画面の高さの100%、(すなわちなしスクロール)
  2. が垂直(および水平方向を持っています)centered メインコンテンツを保持する

ラッピングコンテナが静的な高さを持つ場合、垂直センタリングが可能であることがわかります。この高さをブラウザのウィンドウの高さに合わせることは実現可能ですか?

+2

HTML/CSSとして難しいのは難しいですが、ブラウザウィンドウの高さを知る方法がありません。私はこれがJSがブラウザウィンドウの高さを検出することで可能になると思っています(もちろん、ユーザーのサイズが変更された場合はこの高さに変更されます)。 –

+4

http://reisio.com/examples/のvertcenterまたはdeadcenterは、トリッキーなビットをカバーする必要があります – reisio

+0

@reisio - 素晴らしい例!私は適切にupvoteすることができますので、答えとして投稿してくださいできますか? –

答えて

19

「クロスブラウザ」の意味によって異なります。以下のすべての現在、規格互換のもの(これはないIE6)で正常に動作します:

HTML:

<div id="a"> 
    <div id="b"> 
     <div id="content"></div> 
    </div> 
</div> 

CSS:

html, body, #a { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

#a { 
    display: table; 
} 

#b { 
    display: table-cell; 
    margin: 0; 
    padding: 0; 

    text-align: center; 
    vertical-align: middle; 
} 

#content { 
    border: 5px solid red; 
    width: 100px; 
    height: 100px; 
    margin: auto; 
} 

ライブ例:

http://jsfiddle.net/mGPmr/1/

0

少なくともCSS2以前では(CSS3がこれを可能にしているかどうかは分かりませんが、誰かがそれを明確にしています)、JavaScriptなしでは単純にできません。

他の回答には、要素の絶対幅と高さが必要です。私はそのような必要条件を仮定しなかった。固定サイズのコンテナをコンテンツに確実に使用するためのブラウザウィンドウの縦横比がわからないことを考えると、通常どおりに流れる要素を垂直にセンタリングする方法はありません。

0

あなたはこのようなことをすることができます。それはIE6でもうまくいくように見えます。

<html> <head> 

<script type="text/javascript"> </script> 

<style type="text/css"> 

#container { height: 100%; width: 100%; position: relative; } 


#content { 
    border: 5px solid red; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    margin-left: -50px; 
    margin-right: -50px; 
    top: 50%; 
    left: 50%; } 


</style> 


</head> <body> 

<div id="container"> 
     <div id="content"></div> </div> 

</body> </html> 
関連する問題