✔ div über gesamte Seite

Microhome

Microhome

Erfahrenes Mitglied
Hallo liebe Community,
ich möchte gern ein div über die gesamte Seite packen. Hierzu verwende ich folgenden Code:

Code: 
#box{
    background-color: #999;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 5;
    width: 100%;
    height: 100%;
}

Probleme gibt es nun, wenn die Seite "länger" als der Monitor ist, ich also scrollen muss, denn das div geht nur so weit, wie der Monitor hoch ist. Kann ich das ganze irgendwie ändern, sprich dass 100 Prozent der gesamten Seite entsprechen


Vielen Dank und einen angenehmen Restsonntag!
 
Hab lang nix mehr in CSS gemacht ^ ^
Also probier zusätzlich zu deinem erstmal:
Code: 
html, body{
  height: 100%;
}
 
Microhome hat gesagt.:
Probleme gibt es nun, wenn die Seite "länger" als der Monitor ist, ich also scrollen muss, denn das div geht nur so weit, wie der Monitor hoch ist. Kann ich das ganze irgendwie ändern, sprich dass 100 Prozent der gesamten Seite entsprechen
Zum Vergrößern anklicken....
Hi,

in diesem Fall wird für die Box eine Mindesthöhe eingerichtet:
CSS: 
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}

#box{
    background-color: #999;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 5;
    width: 100%;
    min-height: 100%; /* Mindesthöhe in standardkonformen Browsern */
    height: auto !important; /* auto-height mit !important-Regel für standardkonforme Browser, damit sie nachfolgende height-Deklaration ignorieren */
    height: 100%; /* "Mindesthöhe" in IE<7 */
}

mfg Maik
 
Hallo Maik,
danke für deine Antwort! Die Idee mit der Mindesthöhe hatte ich auch schon, doch leider führt das zu genau dem selben Ergebnis.

Habt ihr noch einen Vorschlag?
 
Der Vorschlag funktioniert bei mir einwandfrei.

Vielleicht mal zwischendurch den Browsercache leeren.

mfg Maik
 
Maik hat gesagt.:
Der Vorschlag funktioniert bei mir einwandfrei.
Zum Vergrößern anklicken....
Einen Schnappschuß hab ich auch :)

test_Microhome.jpg

Und so lautet der Quellcode meiner Testseite:
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-04-05">

<title></title>

<style type="text/css">
<!--
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
#box{
    background-color: #999;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 5;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
-->
</style>

</head>
<body>

<div id="box">
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
</div>

</body>
</html>


mfg Maik
 
Hi Mike, da haben wir wohl aneinander vorbei geredet, sorry!
Bei dir hat das overlay-div ja die entsprechende Größe aufgrund seines Inhalts. Ich gehe aber davon aus, dass der "Hintergrund" länger als der Bildschirm ist und suche nun eine Lösung, das overlay-div entsprechend anzupassen.

Hier mein Code zur Veranschaulichung:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-04-05">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js"></script>
<title></title>

<style type="text/css">
<!--
html, body{
  height: 100%;
  margin: 0;
  padding: 0;
}
#box{
    background-color: #000;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 5;
    width: 100%;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}
-->
</style>

</head>
<body>
<div id="box" style="display:none;"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae orci et nisl aliquam faucibus. Nulla facilisi. Curabitur mauris. Ut viverra, purus non hendrerit convallis, dui odio auctor elit, in accumsan odio nibh id tortor. Morbi facilisis ipsum sit amet dolor. Nulla turpis. Pellentesque scelerisque felis in nisi. Donec lobortis purus vitae erat volutpat accumsan. In arcu lorem, suscipit id, gravida sed, scelerisque in, est. Cras sagittis turpis vitae sapien. Proin convallis. Mauris urna.<br><br>

Donec nunc. Phasellus ipsum. Sed at libero vestibulum sem mattis mollis. Nam sed sem at quam ornare luctus. Mauris at metus vitae lacus rutrum semper. Curabitur non purus. Nulla facilisi. Morbi sit amet arcu et diam convallis condimentum. Sed sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget arcu eget odio luctus placerat. Nulla elit mi, lobortis ac, accumsan ut, ornare quis, diam. Pellentesque faucibus interdum mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus at elit.<br><br>

Nullam ultrices felis non orci. Pellentesque vel elit vel est sagittis dignissim. Vestibulum ultricies turpis bibendum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean blandit luctus neque. In nisl ligula, gravida in, lacinia quis, fringilla ac, nisl. Ut pellentesque ipsum. Morbi semper dolor at massa. Morbi rutrum, purus eu eleifend hendrerit, est odio varius orci, eget ornare metus ante eget felis. Praesent ut orci. Sed quis dui. Aliquam cursus sapien nec ligula.<br><br>

Curabitur at dui quis nisi ultrices suscipit. Sed a libero ut dolor ullamcorper imperdiet. Phasellus massa nisi, sagittis quis, hendrerit aliquam, hendrerit quis, risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus neque. In hac habitasse platea dictumst. Aenean sed quam. Vestibulum placerat sollicitudin nulla. Nam commodo tincidunt leo. Ut nec felis porttitor felis placerat sodales. Donec mattis. Sed nec dui in neque accumsan vestibulum. Aliquam erat volutpat. Aliquam sodales. Aliquam enim lorem, facilisis sed, imperdiet nec, luctus ut, velit. Duis massa ligula, tempor nec, venenatis id, condimentum sit amet, sapien. Vestibulum et dui sed metus feugiat consectetur. Maecenas convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras rhoncus tellus eget lectus.<br><br>

Aenean sollicitudin interdum sem. Nullam quam turpis, lobortis non, sodales quis, varius blandit, diam. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nibh nunc, bibendum quis, ultricies non, vehicula sed, quam. Sed ornare tortor quis nibh. Proin cursus massa at libero. Donec vitae quam a ante pulvinar pellentesque. Aenean ultricies orci nec lacus. Aenean vitae nibh. Mauris vel nunc. Suspendisse sem leo, feugiat nec, placerat vitae, tristique facilisis, orci. Praesent lacinia malesuada nibh. Aliquam at turpis. Cras nec libero. Praesent luctus dolor eu dui.<br><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae orci et nisl aliquam faucibus. Nulla facilisi. Curabitur mauris. Ut viverra, purus non hendrerit convallis, dui odio auctor elit, in accumsan odio nibh id tortor. Morbi facilisis ipsum sit amet dolor. Nulla turpis. Pellentesque scelerisque felis in nisi. Donec lobortis purus vitae erat volutpat accumsan. In arcu lorem, suscipit id, gravida sed, scelerisque in, est. Cras sagittis turpis vitae sapien. Proin convallis. Mauris urna.<br><br>

Donec nunc. Phasellus ipsum. Sed at libero vestibulum sem mattis mollis. Nam sed sem at quam ornare luctus. Mauris at metus vitae lacus rutrum semper. Curabitur non purus. Nulla facilisi. Morbi sit amet arcu et diam convallis condimentum. Sed sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget arcu eget odio luctus placerat. Nulla elit mi, lobortis ac, accumsan ut, ornare quis, diam. Pellentesque faucibus interdum mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus at elit.<br><br>

Nullam ultrices felis non orci. Pellentesque vel elit vel est sagittis dignissim. Vestibulum ultricies turpis bibendum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean blandit luctus neque. In nisl ligula, gravida in, lacinia quis, fringilla ac, nisl. Ut pellentesque ipsum. Morbi semper dolor at massa. Morbi rutrum, purus eu eleifend hendrerit, est odio varius orci, eget ornare metus ante eget felis. Praesent ut orci. Sed quis dui. Aliquam cursus sapien nec ligula.<br><br>

Curabitur at dui quis nisi ultrices suscipit. Sed a libero ut dolor ullamcorper imperdiet. Phasellus massa nisi, sagittis quis, hendrerit aliquam, hendrerit quis, risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus neque. In hac habitasse platea dictumst. Aenean sed quam. Vestibulum placerat sollicitudin nulla. Nam commodo tincidunt leo. Ut nec felis porttitor felis placerat sodales. Donec mattis. Sed nec dui in neque accumsan vestibulum. Aliquam erat volutpat. Aliquam sodales. Aliquam enim lorem, facilisis sed, imperdiet nec, luctus ut, velit. Duis massa ligula, tempor nec, venenatis id, condimentum sit amet, sapien. Vestibulum et dui sed metus feugiat consectetur. Maecenas convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras rhoncus tellus eget lectus.<br><br>

Aenean sollicitudin interdum sem. Nullam quam turpis, lobortis non, sodales quis, varius blandit, diam. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nibh nunc, bibendum quis, ultricies non, vehicula sed, quam. Sed ornare tortor quis nibh. Proin cursus massa at libero. Donec vitae quam a ante pulvinar pellentesque. Aenean ultricies orci nec lacus. Aenean vitae nibh. Mauris vel nunc. Suspendisse sem leo, feugiat nec, placerat vitae, tristique facilisis, orci. Praesent lacinia malesuada nibh. Aliquam at turpis. Cras nec libero. Praesent luctus dolor eu dui.<br><br>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae orci et nisl aliquam faucibus. Nulla facilisi. Curabitur mauris. Ut viverra, purus non hendrerit convallis, dui odio auctor elit, in accumsan odio nibh id tortor. Morbi facilisis ipsum sit amet dolor. Nulla turpis. Pellentesque scelerisque felis in nisi. Donec lobortis purus vitae erat volutpat accumsan. In arcu lorem, suscipit id, gravida sed, scelerisque in, est. Cras sagittis turpis vitae sapien. Proin convallis. Mauris urna.<br><br>

Donec nunc. Phasellus ipsum. Sed at libero vestibulum sem mattis mollis. Nam sed sem at quam ornare luctus. Mauris at metus vitae lacus rutrum semper. Curabitur non purus. Nulla facilisi. Morbi sit amet arcu et diam convallis condimentum. Sed sed arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras eget arcu eget odio luctus placerat. Nulla elit mi, lobortis ac, accumsan ut, ornare quis, diam. Pellentesque faucibus interdum mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus at elit.<br><br>

Nullam ultrices felis non orci. Pellentesque vel elit vel est sagittis dignissim. Vestibulum ultricies turpis bibendum nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean blandit luctus neque. In nisl ligula, gravida in, lacinia quis, fringilla ac, nisl. Ut pellentesque ipsum. Morbi semper dolor at massa. Morbi rutrum, purus eu eleifend hendrerit, est odio varius orci, eget ornare metus ante eget felis. Praesent ut orci. Sed quis dui. Aliquam cursus sapien nec ligula.<br><br>

Curabitur at dui quis nisi ultrices suscipit. Sed a libero ut dolor ullamcorper imperdiet. Phasellus massa nisi, sagittis quis, hendrerit aliquam, hendrerit quis, risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus neque. In hac habitasse platea dictumst. Aenean sed quam. Vestibulum placerat sollicitudin nulla. Nam commodo tincidunt leo. Ut nec felis porttitor felis placerat sodales. Donec mattis. Sed nec dui in neque accumsan vestibulum. Aliquam erat volutpat. Aliquam sodales. Aliquam enim lorem, facilisis sed, imperdiet nec, luctus ut, velit. Duis massa ligula, tempor nec, venenatis id, condimentum sit amet, sapien. Vestibulum et dui sed metus feugiat consectetur. Maecenas convallis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras rhoncus tellus eget lectus.<br><br>

Aenean sollicitudin interdum sem. Nullam quam turpis, lobortis non, sodales quis, varius blandit, diam. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut nibh nunc, bibendum quis, ultricies non, vehicula sed, quam. Sed ornare tortor quis nibh. Proin cursus massa at libero. Donec vitae quam a ante pulvinar pellentesque. Aenean ultricies orci nec lacus. Aenean vitae nibh. Mauris vel nunc. Suspendisse sem leo, feugiat nec, placerat vitae, tristique facilisis, orci. Praesent lacinia malesuada nibh. Aliquam at turpis. Cras nec libero. Praesent luctus dolor eu dui.<br><br>

<a href="#" onclick="$('box').appear({ duration: 5.0, to: 0.9 });">dunkel machen</a>
</body>
</html>

Hast du 'ne Idee?


Vielen Dank und einen guten Start in die Woche!
 
Moin,

jetzt versteh ich, worauf du hinauswillst, und muß dich leider enttäuschen, denn mit z-index schichtpositionierte Blöcke haben keinen Bezug zueinander - sprich, wenn in deinem Fall der Inhalt im Dokumentkörper zunimmt, wächst das "Overlay-DIV" in seiner Höhe nicht mit.

mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück