コンテナ内の領域ではなく、divがページ全体をカバーできるようにする

Question 1

半透明のdivが画面全体をカバーするようにしようとしています。私はこれを試しました：

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

しかし、それは画面全体をカバーするのではなく、div内の領域のみをカバーします。

Question 2

追加し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トリックには、フルスクリーンプロパティに関する興味深い記事もあります。

編集：
ちょうどこの答えに出くわしたので、私はいくつかの追加のものを追加したいと思いました。
同様にダニエル・アレンラングドンが追加、コメントで述べたtop:0; left:0;、確かに非常に上部のカバースティックと画面の左に。

一部の要素がカバーの上部にある場合（したがって、すべてをカバーしているわけではありません）、を追加しz-indexます。数値が大きいほど、カバーするレベルが多くなります。

Question 3

親要素もに設定する必要があり100%ます

html, body {
    height: 100%;
}

デモ（backgroundデモ用に変更）

また、画面全体をカバーしたい場合は、やりたいように見える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%;}

デモ2

Question 4

これでうまくいきます！

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

Question 5

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/

Question 6

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

Question 7

これを試して

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

Question 8

css-resetを適用して、このようにすべてのマージンとパディングをリセットします

/* 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-resetsを使用して、cssで使用できます。

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

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

Question 9

htmlタグとbodyタグheightをに設定し100%、bodyの周囲のマージンを削除します。

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

次にposition、divのをfixed次のように設定します。

#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/

Question 10

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

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