Fensterhöhe in css ermitteln?
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
beispiel
boxen
code
einnehmen
fenster
http
kaffee
pixel
position
problem
schieben
tasse
umweg
url
vorhaben
vorraussetzung
werten arbeiten
wissen
zelle
zweite box
-
Hallo,
ich habe gerade ein (vielleicht lächerliches, komme dennoch nicht auf die Lösung) Problem:
Ich versuche eine Seite "unter" andere andere zu schieben. Vorstellen kann man sich das ganz einfach, wie eine Box, wo dadrunter noch eine Box ist. Die beiden sind also aufeinander gestapelt. Die erste Box ist aber so groß, dass sie den ganzen Monitor einnehmen soll. Die zweite Box soll dann genau unter der Box anfangen...
Also:
Box 1: Width: 100%; Height: 100%;
Box 2: Position: Nach Box1 (Height 100%)...
Ich bekomme das einfach nicht hin.. Wenn ich nu von Box zwei "position-top: 1000 px" setze, dann wird es richtig angezeigt.. Allerdings auch nur bei der Auflösung! Es soll ja bei jeder Auflösung richtig angezeigt werden... Wie mache ich das also nun? ^^
Sorry ich komme einfach net drauf :/ margin hat mir bisher auch nicht geholfen ^^ -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Für dein Vorhaben musst du nicht die Höhe des Fensters in Pixel wissen, sondern kannst auch einfach mit prozentuellen Werten arbeiten.
Da ich mir nicht ganz sicher bin, wie genau du dir das vorstellst, habe ich mal zwei Beispiele hochgeladen:
Beispiel 1
Beispiel 2
mfg -
syberpsace schrieb:
Für dein Vorhaben musst du nicht die Höhe des Fensters in Pixel wissen, sondern kannst auch einfach mit prozentuellen Werten arbeiten.
Da ich mir nicht ganz sicher bin, wie genau du dir das vorstellst, habe ich mal zwei Beispiele hochgeladen:
Beispiel 1
Beispiel 2
mfg
Die höhe ist ja nicht das Problem, das Problem ist es die Höhe zu ermitteln, damit ich die zweite Box genau unter diese 100% schieben kann.. Also das die quasi bei 101% anfängt... Nur funktioniert das nicht, wenn ich einfach sage top: 101%.. -
Warum musst du die Box denn nach 101% schieben?
Wenn du die Box2 im Code einfach nach der Box1 definierst, beginnt diese automatisch erst dort, wo die Box1 aufhört (also nach 100%).
Vorraussetzung für das ganze ist natürlich, dass du keine floats verwendest.
mfg
ps: wenn du dir meine beiden Codebeispiele angesehen hättest, hättest du das vermutlich auch gesehen. -
syberpsace schrieb:
Warum musst du die Box denn nach 101% schieben?
Wenn du die Box2 im Code einfach nach der Box1 definierst, beginnt diese automatisch erst dort, wo die Box1 aufhört (also nach 100%).
Vorraussetzung für das ganze ist natürlich, dass du keine floats verwendest.
mfg
ps: wenn du dir meine beiden Codebeispiele angesehen hättest, hättest du das vermutlich auch gesehen.
Demnach wäre die 3. Box bei 200%, die 4. bei 300% usw. ?? Sieht schon mal nicht soo schlecht aus.. Allerdings habe ich einen Textcontainer float left gesetzt, weil es einfach schöner aussieht.. Werde das dann einfach mal mit padding machen, liefert ja das selbe Ergebnis auf Umwegen...
Damit ist die Frage dann wohl beantwortet, ich weiß auch net, warum ich nicht drauf gekommen bin.. Lag wohl daran, dass meine Kaffee Tasse leer ist lach :D Danke soweit :) -
jaja der kaffee...
du kannst innerhalb der "boxen" ruhig float solange du vorm schließenden html-tag auch wieder clearst.
bedenke aber das wenn du all diesen boxen-divs mit css die höhe 100% (vom elternelement bzw body) zuweist das ein overflow auftreten wird wenn das fenster klein ist, da 100% ja jeweils die feste höhe ist. wenn du das vermeiden willst, aber der "anfangspunkt" der nächsten boxen immer auf einer "vertikal-drunterliegenden-seite" liegen soll empfehle ich den einsatz einer tabelle mit jeweils zeile und zelle pro "box". wenn du für jede zelle dort mit css die höhe 100% festlegst wird das als min-height angesehen und das element wächst also mit größerem-inhalt mit (und zwar valide, ohne css3 oder javascript). -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
