Supportnet Computer
Planet of Tech

Supportnet / Forum / Webseiten/HTML

Container mit maximaler Höhe... Wie?





Frage

Hallo, Wie bringe ich einen container auf maximale höhe? Mit margin-bottom: 0px; klappt das nicht.

Antwort 1 von some1unknown

es gibt die eigenschaft max-height/min-height und so weiter, allerdings sind die soweit ich festgestellthabe nich immer so wirksam^^
einfach mal ausprobieren
gruß

Antwort 2 von rabies

Zitat:
allerdings sind die soweit ich festgestellthabe nich immer so wirksam^^


Das liegt an der mangelnden Implentierung von CSS2, die leider auch jetzt noch vorliegt... Ich erwarte die vollständige Einbettung bei allen Browsern dann gegen 2020. :)

@Threadersteller: Wichtiger wäre zu wissen, was Du genau vorhast, dann kann man Dir eventuelle Workarounds aufzeigen... Denn wie schon erwähnt, max- und min-height sind nicht wirklich in allen derzeitig genutzten Browsern implementiert.

--rabies.

Antwort 3 von habblahabbla

Also, ich habe 3 container untereinander mit width:100%. Der oberste und der unterste haben height:80px.
Nun soll der unterste immer 0px abstand nach ganz unten haben, also sozusagen margin-bottom:0px;.
Das soll bewirken, dass der mittlere container sich immer so "dehnt", dass die ganze seite ausgefüllt ist, egal wie groß der bildschirm ist, auf dem man sich die seite anschaut.

Antwort 4 von Lolo

Hi, versuchs mal beim mittleren Container mit height: auto; oder mit 100% anstatt auto.

Antwort 5 von habblahabbla

Hab ich schon versucht.
Geht leider nicht.
Denn height: auto; bedeuted ja, dass der container nur so hoch ist, wie text vorhanden ist.
Und height: 100%; würde bei nur einem container klappen, aber da ich ja noch darüber und darunter jeweils 1 container hab, addiert sich zu den 100% noch die höhe der beiden anderen container. Somit hab ich in der höhe mehr als 100%, was bedeuted, dass du nach unten scrollen musst, um allen zu sehen. Ich würde aber gerne alles drauf haben.

Antwort 6 von rfb

Was du so schön umständlich beschreibst klingt nach einem Layout mit "Feststehender Kopf- und Fußzeile", wie es hier ausführlich beschrieben wird bei SelfHTML

Antwort 7 von habblahabbla

Danke für den Tipp.
Aber das geht schon in eine etwas andere richtung...
Ich hab jetzt (durch probieren) herausgefunden, dass es wohl nicht geht, dass man feste height-werte und prozentangaben (für den height-wert) kombiniert, wenn man am ende auf 100% kommen will. Aber das macht nichts.
Nun hab ich Folgendes versucht:

body {
border: 0;
padding: 0;
margin: 0;
}
#top {
height: 20%;
}
#center {
height: 65%;
}
#bottom {
height: 15%;
}

... das sieht auch erstmal so aus, wie ich es wollte,
aber wenn ich bei #center mehr text eingebe, als der container groß ist, dann dehnt der sich nicht, sondern der text geht einfach über den darunterliegenden container hinüber.
Weiß jemand, was ich dagegen tun kann?

Antwort 8 von rfb

Zitat:
Aber das geht schon in eine etwas andere richtung...
tja, und welche?

Zitat:
dann dehnt der sich nicht,
wieso auch? Laut CSS darf er es doch gar nicht.

Was du suchst ist übrigens die
overflow
-Eigenschaft.

Antwort 9 von habblahabbla

overflow-Eigenschaft:...
..."Der Internet Explorer bis Version 6 vergrößert bei visible das Element so weit, bis der Inhalt vollständig sichtbar ist."...

O.K. der IE macht es falsch. Aber er zeigt es so an wie ich es will. Was muss ich denn nun tun, damit es alle Browser so anzeigen, wie es der IE 'falsch' macht???

Antwort 10 von D3s3rt

Ich weis ja nicht ob du es nur mit HTML Lösen willst, aber wie währe es wenn du mit JavaScript die Höhe des Fensters ausliest window.innerHeight und dann einfach die Höhe deiner restlichen Container Abziehst.

Antwort 11 von rfb

@D3s3rt:
funktioniert nur
  • wenn JavaScript aktiviert ist
    und
  • die Besonderheiten des IE berücksichtigt werden
    und
  • entsprechend dem onresize-Handler (ohne den gehts ja wohl nicht) etwas träge

    übrigens:
    Zitat:
    Ich weis ja nicht ob du es nur mit HTML Lösen willst
    mit HTML lässt sich das gar nicht "lösen" - Layout ist Sache von CSS

  • Antwort 12 von rfb

    @habbla...
    alle modernen Browser (das schließt den IE bis voraussichtlich Version 9.0 aus) unterstützen
    max-height