2016-12-25 23 views
-1

皆さんにクリスマスクリスマス!スクロールバーを使用した垂直中央のフルスクリーンdiv

下のすべてのコンテンツをオーバーレイして、フルスクリーンの縦中心の画像を作成したいと考えています(div)。素晴らしい仕事が、私は#boxに、より多くのコンテンツを追加するとき、それが動作を確認することもhttps://jsfiddle.net/uzy78s69/1/

クリックXまたはCreate new postを動作しないようですhttps://jsfiddle.net/uzy78s69/

/* css */ 
#box { 
    background: #fff; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    overflow-y: auto; 
} 

/* It is <body> tag class */ 
.overlay-hidden { 
    overflow: hidden; 
} 

<!-- html --> 
<body class="overlay-hidden"> 
    <div id="box"> 
     <!-- #box popup content goes here --> 
    </div> 
    <div class="container"> 
     <!-- content goes here --> 
    </div> 
</body> 

は、ここに私のコードです。

私は間違っていますか?どうすれば修正できますか?

+0

は 'チェック揃える-アイテムを持っている:センター;'この部分を...私はそれが動作をオフにするとき....私はあなたはこのようにしたいと思いますか? –

+1

**縦に表示された全画面表示**意味は?全幅のコンテンツを中心にする目的は何ですか? –

+0

@dreamhunterフルスクリーンで私はすべてのブラウザの領域をオーバーフローさせることを意味しました 'width:100%;高さ:100% '。 'div'も垂直方向と水平方向に中心を置くべきです。 – Jarmark

答えて

0

#boxクラスからdisplay:flex;を削除するだけです。

Example

関連する問題