✔ Dark-Overlay mit CSS gestalten?

[FunkyMonkey]

Hallo Leute

ich möchte für wichtige System-Mitteilungen wie z.B. sicherheitsabfragen, Login oder Logout Screens die Website durch ein dunkles Overlay leicht transparent ausblenden, und darüber dann die Mitteilung legen.

Das habe ich mit einem DIV probiert, welches die id dark_msg_overlay hat.

In CSS habe ich dazu notiert:

/* Gray Overlay */
#dark_msg_overlay {
	background-color: #000000;
	color: #ffffff;
	visibility: visible;
	filter: alpha(opacity=60);
	opacity: 0.6;
	-moz-opacity: 0.6;
	z-index: 9998;
	position: absolute;
	top: 0px;
	left: 0px;
	display: block;
	width: 100%;
	height: 100%;
}

Das Problem ist nun: Wie kriege ich das DIV auf volle Größe, so das es Viewportfüllend erscheint? Es bleibt nur so hoch wie minimal nötig um den Inhalt darzustellen. Die Breite geht bis auf 10 Pixel an die rechte Seite, also halbwegs okay...

Im Prinzip ist das doch so etwas ähnliches wie die Lightbox, nur will ich kein JavaScript verwenden.

Im Body habe ich ein Margin von 5px.

Kennt jemand einen Trick wie das easy zu machen ist?

 

[Maik]

Hi,

setz die folgende Regel im Stylesheet ein, damit die Box den vertikalen Viewport komplett ausfüllt:

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

 

[FunkyMonkey]

Danke! Dachte immer der Body hätte automatisch 100% bzw. Viewportgröße! Sensationell

 

[Maik]

Das ist vom deklarierten Doctype und dessen Darstellungsmodus abhängig, mit dem das HTML-Dokument an den Browser übergeben wird.

Im "Quirksmode" reicht die height:100%-Deklaration für die Box, um sie in der Vertikalen zu strecken, im "Standardsmode" hingegen nimmt sie zunächst nur die Höhe ein, die der Inhalt von ihr abverlangt - so wie du es eben geschildert hattest.