Scrolling im DIV-Container

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,
ich habe eine weitere Frage zum Thema DIV-Container. Und zwar habe ich in einem DIV-Container, der eine variable Höhe hat, drei weitere DIV-Container platziert. In einem soll der Text der jeweiligen Internetseite stehen und dort will ich auch scrollen können, wenn die Inhalte etwas länger sind. Leider werden bei längeren Texten keine Scrollbalken gesetzt, sondern der DIV-Container verlängert sich einfach unerwünscht nach unten. Wie muss ich das richtig programmieren?

CSS:
#menucontentrahmen {
position: absolute;
bottom: 81px;
width: 705px;
left: 560px;
height:75%;
min-height: 565px;
padding: 0px;
margin: 0px;

}

#menubox {

width:705px;
height:80px;
float:right;
}

#menu {
text-align: right;
padding-right: 10px;
}

#menuschwarz {
width: 4px;
height: 80px;
background: #000000;
float:right;
}

#content {
overflow: auto;
float:left;
display: block;
padding: 0px;
padding-top: 10px;
padding-bottom:0px;
}

HTML:

Links zu den Unterseiten

Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test Test Test Test
Test Test Test Test Test Test Test Test Test Test Test Test T

Herzlichen Dank für eure Hilfe und noch ein schönes Wochenende!
gruß
Max

#2

Hallo maexmaex,

für den scrollfähigen Div-Container muss „overflow:scroll“ definiert sein.

Schöne Grüße,

Mohamed.

#3

Nein, das funktioniert leider in meinem Beispiel nicht. Auch wenn ich „scroll“ dahinter schreibe, verlängert er mir den Container unerwünscht nach unten und bietet kein Scrolling an.

#4

Hi Max,

habe ich in einem DIV-Container, der eine variable Höhe hat,

öhm … variable Höhe?
gibt es nicht … es gibt „auto“ = wächst mit Inhalt
und ist default-wert für height.

In Deiner HTML-Aufstellung fehlt mindestens 1 end-tag … vielleicht liegt es daran … jedenfalls kann ich nirgendwo sehen, dass ein container 3 container beinhaltet.

Ebenso wäre es hilfreich, wenn Du bezeichnen würdest, welchen Container (z.B. über Id) Du konkret meinst.

h♥rzlichen Gruß
Nitya

#5

Hallo Nitya,
danke für deine Antwort. Du hast recht, ganz unten von meinem Code fehlt ein .

Also im Div #menucontentrahmen ist der DIV-Container #menubox (worin sich #menu und #menuschwarz befinden) sowie der DIV-Container #content, in dem sich der Inhalt der Homepage befinden soll.

Wie zu sehen ist, hat #menucontentrahmen eine Höhe von 85% der Seite, also variabel.

Es geht jetzt darum, dass bei längeren Texten eine Scrollbar im #content auftauchen soll, was aber nicht geschieht, sondern der ganze DIV-Container verlängert sich bei längeren Texten einfach nach unten.

#6

Hi Max,

erstens ist eine relative Höhenangabe in % nicht mit einer „variablen“ Höhenangabe (die es in css nicht gibt) gleichzusezten.

zweitens … wie kann ein Element wisen, ab wann es overflowed ist, wenn es nicht weiss, welche Höhe es hat?(sehe keine Höhen-Angabe für #content)

h♥rzlichen Gruß
Nitya

#7

Hallo Nitya,
ja da hast du wohl recht. Aber wie kann ich das dann lösen? Ich möchte ja, dass der DIV-Block immer ne relative Höhe auf der Seite einnimmt?

gruß
Max

#8

Hallo Max,

also … erstmal sollte Dir klar sein:

  • dass min-height nicht vom IE unterstützt wird

  • dass ein DIV-Element ein Blockelement ist und daher display:block nicht notwendig ist

  • dass relative Angaben der Höhe sich immer auf die Höhe des Elternelement beziehen. Von den relativen 100% des Elternelementes sind bereits absolute Höhen an andere Kinder vergeben … es geht nur, wenn alle Kinder relative Angaben erhalten.

  • dass durch die relative Angabe der Höhe für den „Hauptcontainer“ der gewünschte Effekt (auflösungsbedingt soll sich nur der Teil oberhalb in der Höhe verändern) nicht mehr eintritt

Wie soll das ganze denn jetzt überhaupt aussehen?

h♥rzlichen Gruß
Nitya

#9

#content muss positioniert werden, und zwar am Besten position:absolute. Den Abstand von oben (top) und unten (bottom) angeben, Höhe und overflow auf auto setzen. Dann sollte es funktionieren.

#10

Moin,

nicht die Positionierung des Containers ist ausschlaggebend dafür, dass er scrollt, statt sich zu verlängern, sondern eine feste Höhe. Ist ja auch logisch, woher soll der COntainer sonst wissen, ab wann er scrollen soll? Das ist eine rein logische Überlegung, denn das normale Verhalten ist, dass er sich mit seinem Inhalt vergrößert.

Mit Posiitionierung per „position“ sollte vorsichtig umgegangen werden, insbesondere Anfänger benutzen das meist, weil sie glauben, damit endlich perfektes Layout machen zu können. Dafür ist das aber eigentlich nicht geeignet. Das nur so als Randbemerkung für Mitlesende.

Liebe Grüße,
-Efchen