Consenti a un div di coprire l'intera pagina anziché l'area all'interno del contenitore

89

Sto cercando di creare un div semitrasparente che copra l'intero schermo. Ho provato questo:

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

Ma questo non copre l'intero schermo, copre solo l'area all'interno del div.

css

— Succosa
fonte

4

Aggiungiposition: absolute; top: 0; left: 0;

— Sergiu Paraschiv

C'è qualche aggiornamento per CSS3 o qualsiasi altra estensione che hanno oggi?

— William Entriken

173

Aggiungi position:fixed. Quindi la copertina viene fissata su tutto lo schermo, anche quando si scorre.
E aggiungi forse anche margin: 0; padding:0;così non avrà un po 'di spazio intorno alla copertina.

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

    top:0;
    left:0;

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

E se non dovesse rimanere fisso sullo schermo, usa position:absolute;

CSS Tricks ha anche un interessante articolo sulla proprietà a schermo intero.

Modifica:
ho appena trovato questa risposta, quindi volevo aggiungere alcune cose aggiuntive.
Come Daniel Allen Langdon menzionato nel commento, aggiungi top:0; left:0;per essere sicuro, la copertina si attacca alla parte superiore ea sinistra dello schermo.

Se alcuni elementi sono nella parte superiore della copertina (quindi non copre tutto), aggiungi z-index. Più alto è il numero, più livelli copre.

— Michael Schmidt
fonte

1

Nella mia esperienza, avevo anche bisogno ditop: 0; left: 0;

— Vivian River

Ho sempre lottato con la posizione assoluta con questo, ma l'uso della posizione fissa ha funzionato molto meglio. Grazie

— BrianLegg

2

Apparentemente c'è un problema: se l'elemento position: fixed ha un antenato con una trasformazione css, allora sarà fissato rispetto a quell'antenato invece che al viewport. developer.mozilla.org/en-US/docs/Web/CSS/position#Values

— mpoisot

17

È necessario impostare l'elemento principale per 100%oltre

html, body {
    height: 100%;
}

Demo (modificatobackgroundper scopo dimostrativo)

Inoltre, quando si desidera coprire l'intero schermo, sembra che lo si desideri dim, quindi in questo caso è necessario utilizzareposition: 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 */
}

Se è così, allora non ti serve html, body {height: 100%;}

Demo 2

— Mr. Alien
fonte

2

Forse qualcuno dei genitori l'ha fatto position:relative. Non funzionerà. Suggerisci position:fixedinvece.

— Muhammad Talha Akbar

@MuhammadTalhaAkbar Oh capisco, ho già risposto, penso che dovrei cancellare la mia risposta

— Mr. Alien

È meglio di altri se lo cambi un po '.

— Muhammad Talha Akbar

13

Questo farà il trucco!

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

— Conner Frey
fonte

Mi piace molto perché è corto e pulito.

— Puremonk

6

Utilizza in position:fixedquesto modo il tuo div rimarrà su tutta l'area visualizzabile continuamente ..

dai al tuo div una classe overlaye crea la seguente regola nel tuo CSS

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

Demo: http://www.jsfiddle.net/TtL7R/1/

2

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

— tabone
fonte

1

Prova questo

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

— Vladislav Stanic
fonte

1

Applicare un ripristino CSS per ripristinare tutti i margini e le imbottiture in questo modo

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

v2.0 | 20110126 Licenza: nessuna (dominio pubblico) * /

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;
}

Puoi usare vari resettaggi CSS di cui hai bisogno, normale e usare in CSS

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

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

— Vinay Pratap Singh
fonte

2

In che modo è rilevante?

— akauppi

0

Imposta i tag html e body heightsu 100%e rimuovi il margine attorno al corpo:

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

Ora imposta il positiondel tuo div su 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 */
}

Demo: http://jsfiddle.net/F3LHW/

— Vlabs
fonte

0

si prega di provare con l'impostazione del margine e del riempimento su 0 sul corpo.

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

— Devendra Patel
fonte