1. ホーム
  2. 質問と答え
  3. コンテナ内の領域の代わりにページ全体をカバーするdivを許可する

コンテナ内の領域の代わりにページ全体をカバーするdivを許可する

2013-09-03 13 views
52

半透明のdivを画面全体に表示しようとしています。私はこの試みた：コンテナ内の領域の代わりにページ全体をカバーするdivを許可する

#dimScreen 
{ 
    width: 100%; 
    height: 100%; 
    background:rgba(255,255,255,0.5); 
}

をしかし、それは、それが唯一のdiv内の領域をカバーして、画面全体をカバーしていません。

出典

2013-09-03 Juicy

+3

'position：absolute;トップ：0;左：0; ' –

+0

CSS3やその他の拡張機能はありますか？ –

答えて

101

を必要としないよりも、それは、ケースの場合position:fixedを追加します。あなたがスクロールしてもカバーは画面全体に固定されます。
さらに、margin: 0; padding:0;を追加して、カバーの周りにスペースがないようにしてください。

#dimScreen 
{ 
    position:fixed; 
    padding:0; 
    margin:0; 

    top:0; 
    left:0; 

    width: 100%; 
    height: 100%; 
    background:rgba(255,255,255,0.5); 
}

そして、それは固定画面に固執するべきではない場合、position:absolute;

CSS Tricksを使用するには、また、フルスクリーンの特性についての興味深い記事があります。

編集：
はちょうどこの答えに出くわしたので、私はいくつかの追加のものを追加したいです。
コメントに記載されているDaniel Allen Langdonと同様に、top:0; left:0;を追加すると、画面の上部と左側にカバーが貼り付けられます。

いくつかの要素がカバーの上部にある場合（すべてがカバーされないため）、z-indexを追加します。数字が高いほど、レベルが高くなります。

出典

2013-09-03 09:38:26

+1

私の経験上、私も 'top：0;左：0; ' –

+0

私はこれで常に絶対的なポジションに苦しんできましたが、ポジションを固定して使用する方がはるかに優れていました。ありがとう – BrianLegg

+2

どうやらそこには問題があります。position：固定要素にcss変換の祖先がある場合、ビューポートではなくその祖先に相対的に固定されます。 https://developer.mozilla.org/en-US/docs/Web/CSS/position#Values – mpoisot

12

あなたは、画面全体をカバーしたいとき、などのようです、また

（デモ目的のためにbackgroundを変更） 

html, body { 
    height: 100%; 
}

Demo

同様 100%に親要素を設定する必要があります dimにしたいので、この場合は、あなたが使用する必要があります position: fixed; 

#dimScreen { 
    width: 100%; 
    height: 100%; 
    background:rgba(255,255,255,0.5); 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index: 100; /* Just to keep it at the very top */ 
}

あなたはhtml, body {height: 100%;}

Demo 2

出典

2013-09-03 09:37:54

+2

親のいずれかが 'position：relative'を持っている可能性があります。うまくいかないだろう。代わりに「位置：固定」を提案してください。 –

+0

@MuhammadTalhaAkbarああ、私は、私は私の答えを削除する必要があります私は答えたと答えたdtを参照してください。 –

+0

あなたはちょうどそれを少し変更する場合は、他より良いです。 –

1

この

#dimScreen { 
    width: 100%; 
    height: 100%; 
    background:rgba(255,255,255,0.5); 
    position: fixed; 
    top: 0; 
    left: 0; 
}

出典

2013-09-03 09:38:42

1

は、CSS-リセット 

/* http://meyerweb.com/eric/tools/css/reset/

このような

v2のすべてのマージンやパディングをリセットするために適用してみてください。0 | 20110126 ライセンス：なし（パブリックドメイン） */

html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
b, u, i, center, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td, 
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, 
time, mark, audio, video { 
margin: 0; 
padding: 0; 
border: 0; 
font-size: 100%; 
font: inherit; 
vertical-align: baseline; 
} 
/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
display: block; 
} 
body { 
line-height: 1; 
} 
ol, ul { 
list-style: none; 
} 
blockquote, q { 
quotes: none; 
} 
blockquote:before, blockquote:after, 
q:before, q:after { 
content: ''; 
content: none; 
} 
table { 
border-collapse: collapse; 
border-spacing: 0; 
}

あなたはあなたが必要として、様々なCSS-リセットを使用し、通常とCSSでHTMLと体を設定し

html 
{ 
    margin: 0px; 
padding: 0px; 
} 

body 
{ 
margin: 0px; 
padding: 0px; 
}

出典

2013-09-03 09:39:11 Rex

+1

これはどのように関連していますか？ – akauppi

2 
#dimScreen{ 
position:fixed; 
top:0px; 
left:0px; 
width:100%; 
height:100%; 
}

出典

2013-09-03 09:40:52 tabone

0

を使用することができますタグheight〜100%を削除し、本文の周りの余白を取り除いてください。

html, body { 
    height: 100%; 
    margin: 0px; /* Remove the margin around the body */ 
}

今fixedにあなたのdivのpositionを設定します。

#dimScreen 
{ 
    width: 100%; 
    height: 100%; 
    background:rgba(255,255,255,0.5); 

    position: fixed; 
    top: 0px; 
    left: 0px; 

    z-index: 1000; /* Now the div will be on top */ 
}

デモ：http://jsfiddle.net/F3LHW/

出典

2013-09-03 09:51:35 Vlabs

3

使用position:fixedあなたのdivが連続して全体表示可能領域の上に残ります。この道を...

はあなたを与えますdivをクラスoverlayに設定し、CSSで次のルールを作成します。

.overlay{ 
    opacity:0.8; 
    background-color:#ccc; 
    position:fixed; 
    width:100%; 
    height:100%; 
    top:0px; 
    left:0px; 
    z-index:1000; 
}

デモ：http://www.jsfiddle.net/TtL7R/1/

出典

2013-09-10 07:26:54

0

体にマージンとパディングを0に設定してみてください。

<body style="margin: 0 0 0 0; padding: 0 0 0 0;">

出典

2014-10-31 11:56:46

6

これはトリックです！

div { 
    height: 100vh; 
    width: 100vw; 
}

出典

2016-09-12 00:35:06

関連する問題

 関連する問題