zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Height 100% "Problem"

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 22.04.2009, 15:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard Height 100% "Problem"

Hallo Zusammen

Ich bin seit einiger Zeit damit beschäftigt, "Height:100%" auf den Divs wirksam zu bekommen. Dachte am Anfang das sei ne riesen Geschichte, ist aber soweit recht gut gegangen. Hauptsächlich muss man einfach im HTML und Body Tag schon Height 100% angeben, dann funktionierts dann auf dem Div.

Soweit so gut.

Mein "Problem" ist jetzt aber eher das zusammen Spiel.

Folgendes Beispiel;

HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="Height:100%" >

<head>
</head>
<body style="Height:100%">
	<div style="width:100px;height:400px;background-color:green">Oben Fixe Höhe</div>
    <div style="width:100px;height:100%;background-color:red">Soll eigentlich gegen unten Füllen</div>	
</body>
</html>
Wie ihr sehen könnt hat das erste Div ne Höhe von 400px hat, das Zweite Div übernimmt die Höhe vom übergeordneten Element (body).

Nun Scrollt er natürlich um die 400px vom ersten Div (Da 100% von body + 400px).

Ich möchte aber viel eher sowas erreichen, dass ich den ersten Div mit absoluter Höhe belassen kann, das Zweite Div soll dann aber gegen unten die Page auffüllen, aber nicht grösser werden als der gesamte Page Body (damits nicht scrollt und schön aufgefüllt ist).

Kann mir einer von euch helfen?

Danke und Gruss

Lexy

Geändert von Lexodus (22.04.2009 um 15:22 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 22.04.2009, 15:23
Neuer Benutzer
neuer user
 
Registriert seit: 18.04.2009
Beiträge: 7
nesnnahoj befindet sich auf einem aufstrebenden Ast
Standard

siehe : FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten
unter Punkt 4


MfG
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 22.04.2009, 15:29
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Autsch danke
Mit Zitat antworten
  #4 (permalink)  
Alt 22.04.2009, 18:12
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Sodala, hab mir jetzt beide Beispiele angeschaut, ist aber nur bedingt das was ich möchte;

Beim ersten Beispiel;
Test

Ist zwar der Body 100% in der Höhe, der Rest ist dann aber mit repeatenden hintergrund bildern gelöst, die Boxen hab da garkeine Höhe oder ähnliches. Die wachsen einfach mit dem Inhalt mit, ich möchte ja aber das genau diese "wachsende" box den Rest an Höhe einnimmt und auch dabei bleibt.

Beim zweiten Beispiel;
Home

Sofern ich auch erwischt habe was für mich interessant ist, ist der Footer der mittels "margin:-7.5em auto 0;position:relative;" gelöst.
Vom Ansatz her bricht dieser footer aber ganz einfach aus, und überdeckt den im HTML Code vorausgehenden DIV.

Überdecken wäre für mich nicht ganz so doll könnte ich aber vielleicht adaptieren.
Hier bräuchte ich aber noch hilfe;

Dieser Befehl bringt mich ziemlich aus der Fassung;
"position:relative;margin:-7.5em auto 0"

Wie baue ich jetzt den so um, dass ich quasi keine Margins habe? --> Also ich versteh schon das es die -7.5em irgendwie als hack braucht.
Das wäre bei mir dann quasi oben und 100px hoch und den darauf folgenden div würde ich dann n Margin-Top oder so geben damit da der inhalt nie verdeckt werden kann.

Kann mir einer helfen diesen hack so hinzubiegen das das Element oben ist?

Danke

Geändert von Lexodus (23.04.2009 um 09:10 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 23.04.2009, 10:34
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Hat vielleicht einer ne Idee fürs "zweite" Div.

Ich könnte es auch irgendwie umgehen, wenn ich z.B. dem Zweiten Div nen Margin gebe, dann wird dieser Div 100% Height + die 100px margin (also ein Versuch von mir geht dann natürlich net weil dann zu gross). Gibts da was womit ich die 100 "margin" von oben hinbekomme ohne das das zweite Div grösser wird (resp. der Inhalt vom browser gescrollt werden muss).

Jede Lösung ist willkommen mit margin meine ich nur den symbolischen Abstand von oben. Ich habs auch schon mit position versucht, "stretchen" kann ich da aber leider net.

Hab position:absolute;top:100;bottom:0 versucht, das scheint aber ganz einfach nicht gültig.

Geändert von Lexodus (23.04.2009 um 10:36 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 23.04.2009, 14:14
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Gottnochmals ich könnt mich zeitweise über html css tables und den ganzen Mist so aufregen.

Ich habs sogar mit klassischen verhassten Tabellen versucht, da kann ich ner Row einfach keine Höhenangabe setzen ob mit style oder direkt, wenn die Table die gesamte höhe des Browser per height=100% nimmt. Ohne table height 100% gehts.

Ich verzweifel bald.
Mit Zitat antworten
  #7 (permalink)  
Alt 23.04.2009, 14:36
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

Zitat:
das Zweite Div soll dann aber gegen unten die Page auffüllen, aber nicht grösser werden als der gesamte Page Body (damits nicht scrollt und schön aufgefüllt ist).
Das funktioniert mit CSS noch nicht. Hier helfen Faux Columns (Faq).
__________________
Grüsse Andreas- auch mal wieder da...

Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams)
Wiedergelesen: > hier und hier

[Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
Mit Zitat antworten
  #8 (permalink)  
Alt 23.04.2009, 14:40
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Den Trick hab ich mir auch schon angeschaut, aber wies da schon steht

"The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns."

Das Div hat dann leider doch nicht die Höhe, ich kann darin also keinen Dynamischen inhalt platzieren und dem 100% height geben da der dann wieder ausbricht.
@Edit
Konzeptionell ist sogar eine der Sample Pages ganz am Anfang (wo mich einer drauf hingewiesen hat) so aufgebaut. --> http://d-graff.de/demos/selfhtml/kop...ispalten1.html
Mit Zitat antworten
  #9 (permalink)  
Alt 23.04.2009, 14:47
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Lexodus, eine 100%-Mindesthöhe lässt sich wunderbar mit Faux Columns kombinieren. Bitte beschäftige dich nochmal intensiv damit.

Wenn du Probleme bei der Umsetzung hast, dann zeig her, was du gemacht hast. Siehe auch http://xhtmlforum.de/40080-f-r-frage...twortende.html
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 23.04.2009, 15:09
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 11.03.2009
Beiträge: 104
Lexodus befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Lexodus, eine 100%-Mindesthöhe lässt sich wunderbar mit Faux Columns kombinieren. Bitte beschäftige dich nochmal intensiv damit.

Wenn du Probleme bei der Umsetzung hast, dann zeig her, was du gemacht hast. Siehe auch http://xhtmlforum.de/40080-f-r-frage...twortende.html
Das mit der Mindesthöhe habe ich teilweise probiert, aber ich brauche eigentlich die Höhe, nicht die Mindesthöhe (sollte der Inhalt überlaufen, scroll ich dann mit den jeweiligen Elementen).

Ich bin eigentlich schon ne gute weile daran mich "einzulesen" aber das meiste was mit dieser Thematik zu tun hat sind hacks die ich nicht brauchen kann.
Wie z.B. A List Apart: Articles: Faux Columns
Ich nehme an ihr meint diese "Faux Column"

Sorry aber das Layout einfach in ein Bild zu packen und dieses Bild dann unendlich bis an den ViewPort Bottom zu repeaten nützt mir einfach nichts.

Grundsätzlich und darum habe ich es eben oben mit einem kleinen Sample geschrieben get es mir wirklich darum dass der Div;
a) Die Höhe selbst wirklich hat (kein Y-Repeat oder ähnliches)
b) Mit position/float/display oder was auch immer für CSS Element es so hinzupacken, dass der obere 100px hohe div den Inhalt nicht überdeckt.

Ich habe keine "klassische" Webseite wo ich weiss was für Inhalt kommt, das "obere Div" in meinem Fall enthält eine Toolbar, wo sich der Benutzer An und Abmelden kann, Sprache wählen, aufs Home etc.
Das "untere" div beinhaltet dann hauptsächlich einen Splitter dem ich dann eben 100% geben würde, damit er die ganze Höhe einnimmt. Die Toolbar --> das "obere" Div soll immer dargestellt werden.

Mir ist es darum extrem wichtig das es keine Visuellen Hacks sind sondern dass das Boxmodell dazu auch noch mehr oder weniger passt (wie gesagt, solange die Toolbar nicht vom Inhalt überdeckt wird und umgekehrt sind mir viele Hacks recht).

In diesem Div der den Rest einnehmen soll kann wirklich jedwedriger Inhalt kommen (resp. im Splitter dann). Grids, Charts, Flowcharts, Gauges,Texte alles mögliche und das ist Kundeninstallations speziefisch.

Y-Repeats mit BackgroundImages, Hintegrundfarben etc. helfen mir leider nicht.

Ne Sample page würd ich dir ja posten, aber ich frag mich wieviel sinn es macht, wenn ich es exemplarisch an 2 Divs machen kann.
Wenn ich es mit 2 Divs genbacken bekomm ist alles gelöst. -> das Beispiel hab ich oben.

Ich hab im Moment sogar nicht mal was das nur ansatzweise funktioniert.

@Edit
Sorry meine Rechtschreibung ist teilweise unter aller Kanone

Geändert von Lexodus (23.04.2009 um 15:12 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 16:53
Darstellungsprobleme im IE lea11011989 CSS 17 05.11.2010 09:44
Div Positionen in Firefox falsch ozero CSS 4 17.07.2009 22:35
prblemme mit mein inhalt div carlos587261 CSS 3 23.04.2008 14:07
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:29 Uhr.