Eine 'div' scrollt über die andere


#1
Ich habe einen sogenannten Header...

#header_schwarz {
background-color: #000000;
position: fixed;
top: 0;
width: 100%;
height: 8%;
z-index:1;
}

Danach eine weitere 'div', die Daten ausgibt (scrollt)...
Hat keine height, weil sie sich dauernd vergrössert (neuer Eintrag in Datenbank)...
Sie beginnt kurz unter dem Header.

#root_content {
position:absolute;
top:10%;
right:26%;
width:48%;
background-color:#FFFFFF;
color:#000000;
z-index:2;
}


Im HTML Teil...
<!DOCTYPE html>
"
"
<body>

<div id = "header_schwarz">
</div>

<div id="root_content">
<?php
require_once("root_container.php");
?>
</div>

</body>
</html>

Beim Scrollen des 'root_content' schiebt sich dieser über den Header, anstatt 'darunter' zu verschwinden.
Wie ändere ich das ?
Bitte eine Lösung, denn ich weiss ja, dass
 

Anhänge

Sempervivum

Erfahrenes Mitglied
#4
Quaeses Empfehlung wird zwar dein aktuelles Problem lösen, aber dein Ansatz mit absoluter/fixierter Positionierung hat einige Nachteile, die immer wieder Anlass von Verdruss sind:
  • Höhe des Header passt sich nicht an seinen Inhalt an, sondern muss manuell austariert werden.
  • Position des Content passt sich nicht an Höhe des Header an und muss ebenfalls manuell austariert werden.
Beides kann vermieden werden, wenn man dieses Muster mit Flexlayout verwendet, das von MrMurphy anderswo entwickelt wurde:
http://webentwicklung.ulrichbangert.de/flex-scrollable.html
Hier passt sich alles automatisch an, die Höhe von Header und Footer an den Inhalt und die Höhe des Content, so dass er oben und unten immer vollständig sichtbar. z-index wird nicht benötigt.
 
#6
Quaeses Empfehlung wird zwar dein aktuelles Problem lösen, aber dein Ansatz mit absoluter/fixierter Positionierung hat einige Nachteile, die immer wieder Anlass von Verdruss sind:
  • Höhe des Header passt sich nicht an seinen Inhalt an, sondern muss manuell austariert werden.
  • Position des Content passt sich nicht an Höhe des Header an und muss ebenfalls manuell austariert werden.
Beides kann vermieden werden, wenn man dieses Muster mit Flexlayout verwendet, das von MrMurphy anderswo entwickelt wurde:
http://webentwicklung.ulrichbangert.de/flex-scrollable.html
Hier passt sich alles automatisch an, die Höhe von Header und Footer an den Inhalt und die Höhe des Content, so dass er oben und unten immer vollständig sichtbar. z-index wird nicht benötigt.
Semper hab Dank ... Das, was ich zeigte, war nur ein kleiner Teil ... Es funktioniert jetzt alles ok.
 

Neue Beiträge