ページ（画面ではない）の高さをdivにする方法は？

私は、アプリケーションが動作している最中に、読み込み中のボックスが前面に表示されている間に、私のページに「灰色のような」エフェクトを作成するためにCSSを使用しようとしています。私は100％の高さ/幅、半透明の黒いdivを作成して、これを行っています。これは、javascriptを使って表示/非表示を切り替えることができます。私はこれが十分に簡単だと思った。しかし、ページ内容が画面がスクロールする地点まで拡大すると、ページの足元までスクロールすることにより、グレー表示されない部分が現れる。つまり、divの高さの100％が実際のページサイズではなくブラウザのビューポートサイズに適用されているようです。ページのコンテンツ全体をカバーするようにdivを拡張するにはどうすればよいですか？私はJQueryの.css（ '高さ'、 '100％'）を使って試してみましたが、表示の切り替えはしていませんが、これは何も変わりません。ページ（画面ではない）の高さをdivにする方法は？

これが問題になっているdiv要素のCSSです：

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

感謝。

出典

2009-06-16 Lee D

それはあなた半透明のグレーのdivが表示された状態でバーをスクロールするために無効に働くだろうか？とにかく何もできないことをユーザーがスクロールできるようにしたいのですか？ – Adam

position: absoluteをposition: fixedに変更すると、IE6以外のすべてのブラウザで機能します。これにより、divをビューポートに固定するので、スクロール時に視界から外れることはありません。

jQueryで$(document).height()を使用すると、IE6でも動作させることができます。例えば。

$('.screenMask').height($(document).height());

他のすべてのブラウザでも同様の問題が修正されるはずですが、回避することができればJavaScriptを使用しない方がよいでしょう。実際には、水平スクロールがある場合にも、同じことを幅に対して行う必要があります。

plenty of hacks around to make fixed positioning work in IE6もありますが、CSSには他にもいくつかの制限があり、JavaScriptを使用する傾向があります

また、これらのマスクは1つしかないと思われますので、クラスの代わりにIDを使用することをおすすめします。

出典

2009-06-16 20:02:59 mercator

マスクがJavascriptで表示されている場合、高さの問題を解決するためのJavascriptは何ですか？ –

ありがとうございました。 IDについての公正なポイント。 –

@Lee：Excellent ... @Paolo：これはほとんど問題ではなく、私は同意する必要があります。しかし、JSのサポートはここでは問題ではありませんが、スタイルを振る舞いとミキシングすることになり、パフォーマンスに（わずかに）影響する可能性があります。そしてLeeさんはあなたの質問にも答えました。この場合、JavaScriptソリューションは実際には必要ではありませんでした。 – mercator

あなたは、私はそれを推測しているポップアップがいくつかのより多くのJavaScriptを追加するためにOKになる前に高さを設定するためにはjQueryを使用している場合:)

あなたはdocument.bodyのscrollHeightへのdivの高さを設定することができます - このようにして体の全体を覆うべきです。あなたの下に何かが成長することを決めた場合には、身体を覆い続けていることを確認するためにいくつかのトリッキーを追加する必要があります。 top、bottom、left、及びrightの全てを設定することにより

出典

2009-06-16 20:05:47 ylebre

div.screenMask 
{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    right: 0px; 
    bottom: 0px; 
    z-index: 1000; 
    background-color: #000000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

、高さと幅は自動的に計算されます。 screenMaskが<body>要素の直接の子であり、標準ボックスモデルが有効な場合（つまり、クォークモードがトリガーされていない場合）、これはページ全体をカバーします。

出典

2009-06-16 20:26:26

下のページが1つのviewport-heightより大きい場合、div.screenMaskがスクロールしないように 'position：fixed'を使用する必要はありませんか？ –

これはIE6ではまったく動作しません。他のブラウザーでは、position：相対的な動作が必要ですが、水平スクロールではなく、垂直スクロールでのみ動作します。 – mercator

尋ねられてからずっとこの長いことに私は答えていることを実感しましたが、この問題で簡単にトリップされた後、私はここに着陸しました。

ここで正しい答えだ：

body { 
    position: relative; 
}

それです！これで、要素はビューポートではなく<body>に相対的に配置されます。

position: fixedはブラウザのサポートが不安定であるため気にしません。iOS 5より前のSafariはまったくサポートしていませんでした。

<div>要素は<body>のボーダーボックス（ボックス+パディング+ボーダー）をカバーしますが、マージンはカバーしません。 <div>の負の位置（例：top: -20px）を設定するか、<body>のマージンを削除して補正します。

<body>〜height: 100%を設定して、短いページに部分的にマスクされたビューポートにならないようにすることをおすすめします。

2つの有効なポイントは、前の回答から取られます。 Ben Blankが言うように、widthとheight宣言を失って、代わりに4つのコーナーをすべて配置できます。そして、あなたが重要な単一の要素のためにクラスの代わりにIDを使用すべきであることは、メルケータが正しいです。

これは、次の推奨完全なCSSの葉：私は、これは他の誰かに役立ちます願ってい

<body> 
    <div id="screenMask"></div> 
</body>

：

body { 
    position: relative; 
    margin: 0; 
} 

#screenMask { 
    position: absolute; 
    left: 0; right: 0; 
    top: 0; bottom: 0; 
    z-index: 1000; 
    background-color: #000; 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
    visibility: hidden; 
}

とHTMLを！

出典

2012-08-16 03:32:34

+1しかし、スクロールするコンテナの位置を相対位置に変更すると予期せぬ結果が生じるかもしれないという疑問のあるアプローチだと私は指摘します。運良く私のために、今日、私のスクロールコンテナはすでに相対的な位置にあります！ 'position：absolute'を' left'、 'right'、' top'、 'bottom'と組み合わせるというトリックは、時には本当の命を救う人であり、常に忘れやすいものです。 –

bodyに相対的な配置はほとんど解決しますが、ボディの高さを100％に設定することは有用な解決策ではありません：ビューポートを満たさないページが修正されますが、。また、身体に「min-height：100％」を設定すると、何もしないようです（Firefox）。 –

あなたがオーバーレイ効果のポップアップを望むなら、あなたはこれらのステップを使用することができますが...

<style> 
.overlay{ 
background:#000; 
opacity:0.5; 
position:fixed; 
z-index:1; 
width:100%; 
height:100%; 
} 
.popup{ 
width:500px; 
margin:auto; 
position:fixed; 
z-index:2; 
height:300px; 
} 
</style> 
<div class="overlay"></div> 
<div class="popup"> 
     Hello everyone 
</div>

出典

2014-09-18 12:43:27

ページ（画面ではない）の高さをdivにする方法は？

答えて

関連する問題