"height：100％"のスタイルの要素が100％を超えるように見えるのはなぜですか？

ページが読み込まれているうちに、絶対DIVを「height:100%」の「ページが読み込まれています...」という内容のすべてのコンテンツに貼り付けています。"height：100％"のスタイルの要素が100％を超えるように見えるのはなぜですか？

ただし、ページの高さがコンテンツの高さの100％であることがスクロールバーからわかります。

ページが読み込まれオーバーレイの絶対配置されたDIVがdisplay:noneに設定されると、これはすぐに消えます。

これはFirefox 3、Chrome、IE6で発生します。

どのように高さを作るためのアイデア：100％、100％以上ではない？

<html> 
    <head> 
    <style type="text/css"> 
     * html, * body {height: 100%; margin: 0; padding: 0} 
      #message {background: black; height: 100%; left: 0; opacity: 0.15; position: absolute; top: 0%; width: 100%} 
      #loading {height: 100%; left: 0; position: absolute; top: 45%; width: 100%; z-index: 2} 
      #loading p {background: white; border: 2px solid #666; width: 180px} 
    </style> 
    </head> 
    <body> 
    <div id="grayout"></div> 
    <div id="loading"><p>Page is loading...</p></div> 
    <div id="content"> 
    // content is dynamically loaded into this div via AJAX 
    </div> 
    </body> 
</html>

更新： "：45％トップ" それは問題が表示されますが、私が持っているということです。この同じ問題を何度も繰り返さずに、DIVをページ中央に移動するにはどうすればいいですか？

出典

2009-05-08 Anonymous

'* body'は、IEだけでなくすべてのブラウザを起動することに注意してください。 – Gumbo

使用しているHTMLと他のCSSを追加できますか？ – tspauld

私は質問でHTMLを試して、スクロールバーやコンテンツの高さに奇妙な問題は見られませんでした。 –

この要素に垂直の余白または余白がある場合は、CSS仕様に従ってブロックの高さに追加されます（visual formatting model for absolutely positioned, non-replaced elementsを参照）。編集top:45%

はダウンあなたの要素45％を動かしています。それを削除するか（top:0）、要素の高さをauto（デフォルト値）に設定します。

出典

2009-05-08 16:08:03 Gumbo

いいえ、うまくいきません –

それでは、この振る舞いの原因を調べるために、コードやページ自体が必要です。 – Gumbo

コードは上に掲載されています –

を増やしてみてください

overflow: hidden;

出典

2009-05-08 16:08:24 janhartmann

内容がページよりも長くなっているため動作しません。だからオーバーフローを行うことによって：非表示 - スクロールバーが消えます。 –

絶対配置要素は、ページの流れから取り出され、そのdivが、おそらくコンテンツの後ろに装着されていません。なぜコンテナdivは最初の場所に絶対配置されていますか？

出典

2009-05-08 16:09:18

あなたが試してみました：同様のページから、すべてのパディングとマージンを削除する必要があります

* html, * body {height: 100%; margin: 0; padding: 0;}

を。これはあなたの問題を解決する必要があり

* {padding:0; margin:0}

：

出典

2009-05-08 16:09:24 workmad3

私はパディング/マージンを0に設定しました - まだ同じ問題 –

これは正しい答えです。高さ：HTMLと本文の100％は100％を占めます。つまり、本体に含まれるdivは100％になります。マージン/パディングだけでは機能しません。 – jlarson

-1

Haはほとんど常に.. HTMLイントロテキストなしで問題を引き起こした

<html> 
    <head> 
    </head> 
    <body> 
    <div style="height: 100%; background-color: blue;"></div> 
    </body> 
</html>

出典

2009-05-08 16:10:48

を掲載、私は次の行で、私のCSSを起動します。

出典

2009-05-08 16:13:53

パディング/マージンを0に設定しましたが、これで問題は解決しません –

日時：//コンテンツの多くが動的にAJAX

を介してロードされ、動的データのいずれかがスペースを超えてしまうかもしれない割れないライン、または画像やテキストを持っていますか？

出典

2009-05-08 16:36:44 MichaelICE

「イメージはスペースを超えます」 - スペースを超えていますか？「コンテンツ」DIVは、コンテンツの量に基づいて大きくなり、縮小します。このWebページのように、より多くの回答が投稿されます。よくわかりません –

あなたの「読み込み」divはウィンドウの完全な高さで、上から45％の位置にあるので、ウィンドウが45％オーバーフローしてスクロールバーが表示されます。

ページの上部に移動し、テキストを垂直方向にセンタリングしてみます。

出典

2009-05-08 16:41:33 tspauld

"height：100％"のスタイルの要素が100％を超えるように見えるのはなぜですか？

答えて

関連する問題