nicht angemeldet
Div-Box bündig mit oberen und untern Browserfenster
Hallo,
ihr könnt mir bestimmt bei meinem simplen Problem weiterhelfen. Ich versuche wie oben schon beschrieben, eine Div-Box die eine absolute Breite von 800px hat mit dem oberen und unteren Browser-Betrachtungs-Fenster(keine Ahnung wie man das fachlich nennt) bündig abzuschließen. Habe es beispielweise mit "margin-bottom: 0" oder mit "height: 100%" versucht, ohne Erfolg.
body {
margin: 0;
text-align: center;
}
div#Seite {
text-align: left;
margin: 0 auto;
width: 800px;
padding: 20px;
}
was kann ich tun?
Grüße Torsten
-
Hallo,
Browser-Betrachtungs-Fenster(keine Ahnung wie man das fachlich nennt)
Meinst Du viewport?
Habe es beispielweise mit "margin-bottom: 0" oder mit "height: 100%" versucht, ohne Erfolg.
Nicht oder, beides!
body und html haben auch noch Ränder, also auch da margin und padding auf 0.
see you
Shepard-
hi,
body und html haben auch noch Ränder, also auch da margin und padding auf 0.
Und wie hoch sind body und html? So hoch wie es ihr Inhalt erfordert - sofern für sie nicht explizit eine (Mindest-)Höhe vorgegeben wird.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo,
Und wie hoch sind body und html?
Weiß nicht, 3.50?
So hoch wie es ihr Inhalt erfordert - sofern für sie nicht explizit eine (Mindest-)Höhe vorgegeben wird.
Wußte ich's doch, 3.50!
OK, also auch 100% für html, body.Shepard big in Japan
-
Hi,
Und wie hoch sind body und html?
Weiß nicht, 3.50?
3.5 Äpfel?
So hoch wie es ihr Inhalt erfordert - sofern für sie nicht explizit eine (Mindest-)Höhe vorgegeben wird.
Wußte ich's doch, 3.50!
OK, also auch 100% für html, body.ahha! Logische Schlussfolgerung!
Torsten
-
-
Hi,
Und wie hoch sind body und html? So hoch wie es ihr Inhalt erfordert - sofern für sie nicht explizit eine (Mindest-)Höhe vorgegeben wird.
ja richtig, so wie es mein Inhalt erfordert!
Das Problem mit der (Mindest-)Höhe ist allerdings, dass ich nie voraus sagen kann welche Auflösung der User eingestellt hat. Mit px-Angaben kann ich also nicht arbeiten, prozentual funktioniert das Ganze nicht.
Meine ideal Vorstellung war, dass sich die Höhe der Div-Box dynamisch dem Viewport(oben und unten) bei "geringem Inhalt" anpasst. Wenn der Inhalt ziemlich groß ist, ist das ja alles kein Problem.
Ich würde nicht fragen wenn ich nicht mir bekanntes schon ausprobiert hätte. Aber vielleicht kann mit ja ein hilfsbereiter, freundlicher, erfahrener Webdesigner weiterhelfen.
Torsten
-
-
Hi,
Meinst Du viewport?
Das wirds wohl sein.
Habe es beispielweise mit "margin-bottom: 0" oder mit "height: 100%" versucht, ohne Erfolg.
Nicht oder, beides!
hab ich auch schon probiert. Da margin auf 0 steht, ist margin-bottom ja eigentlich überflüssig.
body und html haben auch noch Ränder, also auch da margin und padding auf 0.
wieso padding auf 0? Ergibt für mich keinen Sinn...
Torsten
-
Hallo..
wieso padding auf 0? Ergibt für mich keinen Sinn...
Das vom Browserstylesheet standardmäßig verwendete padding ("Innenrand") von <html> verhindert, daß deine Box bis ganz an den Rand geht.
Schreibe z.B.:
html, body { margin:0; padding:0; height:100%; }
Das text-align:center kannst Du Dir sparen, text-align richtet Text aus, keine Blockelemente wie <div>
Dein <div> formatierst Du in Deinem Fall mit "margin:0 auto;" und height=100%.
Wenn ich Dich nicht völlig falsch verstanden habe, sollte jetzt alles klappen.
Shepard
-
Hi,
Das vom Browserstylesheet standardmäßig verwendete padding ("Innenrand") von <html> verhindert, daß deine Box bis ganz an den Rand geht.
Schreibe z.B.:
html, body { margin:0; padding:0; height:100%; }
ok, dass funktioniert schon mal, zumindest bei wenig Inhalt.
Problem hab ich allerdings jetzt, dass bei einem sehr langen Inhalt/Text, die box sich nicht mehr mit dem unteren Viewport abschließt. Der Text innerhalb der Box überscheidet sich mit der Box unterhalb.Torsten
-
Hallo Torsten.
html, body { margin:0; padding:0; height:100%; }
ok, dass funktioniert schon mal, zumindest bei wenig Inhalt.
Problem hab ich allerdings jetzt, dass bei einem sehr langen Inhalt/Text, die box sich nicht mehr mit dem unteren Viewport abschließt. Der Text innerhalb der Box überscheidet sich mit der Box unterhalb.Deshalb sollte man für Browser http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=min-height und für den IE unter Verwendung eines http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hacks height verwenden.
Einen schönen Dienstag noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
Deshalb sollte man für Browser http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=min-height und für den IE unter Verwendung eines http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hacks height verwenden.
oh mann ich pflipp gleich aus! mein Problem schon mal in der Praxis getestet?
1. das Resultat ist im IE und Firefox gleich. also wozu hacks?
2. auf die Idee mit min-height kam ich auch schon. bringt nix!Sorry falls das etwas zu schroff rüber kommt, ist nicht bös gemeint. aber manchmal hab ich das Gefühl das hier nur Theoretiker unterwegs sind.
Torsten
-
Hallo Torsten.
Deshalb sollte man für Browser http://de.selfhtml.org/css/eigenschaften/positionierung.htm#min_height@title=min-height und für den IE unter Verwendung eines http://de.selfhtml.org/css/layouts/browserweichen.htm#browserweichen@title=Hacks height verwenden.
oh mann ich pflipp gleich aus! mein Problem schon mal in der Praxis getestet?
- das Resultat ist im IE und Firefox gleich. also wozu hacks?
Damit Browser das div-Element dem Inhalt gemäß erweitern, aber mindestens eine Höhe von 100% beibehalten.
Da der IE hierzu nicht imstande ist, kann man ihm höchstens eine festgelegte Höhe zuweisen, wobei er hier fälschlicherweise das div-Element dennoch dem Inhalt gemäß erweitert.
Einen schönen Dienstag noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
- das Resultat ist im IE und Firefox gleich. also wozu hacks?
Damit Browser das div-Element dem Inhalt gemäß erweitern, aber mindestens eine Höhe von 100% beibehalten.
Da der IE hierzu nicht imstande ist, kann man ihm höchstens eine festgelegte Höhe zuweisen, wobei er hier fälschlicherweise das div-Element dennoch dem Inhalt gemäß erweitert.
also entweder verstehst du mich nicht oder ich verstehe dich nicht.
hacks werden doch nur verwendet wenn der IE sich anders verhält als zb Firefox, oder nicht? in meinem fall verhalten sich beide gleich.ich verstehe auch nicht genau was du mir mit min-height sagen willst. min-heigt bringt mir nur was wenn der text besonders lang ist, sobald der text aber sehr kurz ist bringt mir min-height wieder nichts, in diesem fall funktionierts nur mit height.
Torsten
-
Hallo Torsten.
ich verstehe auch nicht genau was du mir mit min-height sagen willst. min-heigt bringt mir nur was wenn der text besonders lang ist, sobald der text aber sehr kurz ist bringt mir min-height wieder nichts, in diesem fall funktionierts nur mit height.
Hm?
div#Seite { min-height:100%; /* Mindestens 100% Höhe oder aber mehr */ } * html div#Seite { height:100%; /* Siehe oben, wenn auch fehlerhaft */ }Würde man hier height auch für Browser angeben, würden diese natürlich die Höhe auf 100% festzementieren, womit der von dir beobachtete Effekt auftritt, bei welchem der Text über das div-Element hinausläuft.
Einen schönen Dienstag noch.
Gruß, Mathias
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
div#Seite {
min-height:100%; /* Mindestens 100% Höhe oder aber mehr */
}- html div#Seite {
height:100%; /* Siehe oben, wenn auch fehlerhaft */
}
> > Würde man hier height auch für Browser angeben, würden diese natürlich die Höhe auf 100% festzementieren, womit der von dir beobachtete Effekt auftritt, bei welchem der Text über das div-Element hinausläuft. \* html [...] ist ein IE Hack, richtig? D.h. alles was mit \* html notiert ist läuft auch nur im IE, richtig? BRAUCH ICH NICHT!!! WOZU??? das resultat meines designs verhält sich in den gängigsten brwosern gleich verdammt noch mal! wozu also hacks??? problem hat sich im übrigen jetzt behoben! für alle die ähnliche problematik haben: html,body{height:100%} div#Seite{min-height:100%} funzt in den gängigsten brwosern... Torsten-
hi,
* html [...] ist ein IE Hack, richtig? D.h. alles was mit * html notiert ist läuft auch nur im IE, richtig?
BRAUCH ICH NICHT!!! WOZU???
das resultat meines designs verhält sich in den gängigsten brwosern gleich verdammt noch mal!
Ja wozu fragst du dann überhaupt hier, wenn du damit bereits zufrieden warst, verdammt noch mal?
problem hat sich im übrigen jetzt behoben!
für alle die ähnliche problematik haben:html,body{height:100%}
div#Seite{min-height:100%}funzt in den gängigsten brwosern...
Auch im IE 6?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
- html div#Seite {
-
-
hi,
hacks werden doch nur verwendet wenn der IE sich anders verhält als zb Firefox, oder nicht? in meinem fall verhalten sich beide gleich.
Ja, beide gleich falsch.
ich verstehe auch nicht genau was du mir mit min-height sagen willst.
Wieso nicht?
Du willst eine Mindesthöhe, also solltest du auch die entsprechende Eigenschaft verwenden.Hier kommt der Hack ins Spiel. Der (aktuelle) IE versteht min-height nicht, interpretiert aber height so wie min-height - also falsch, aber in so einem Falle brauchbar.
Also sagst du vernünftigen Browsern, dass du eine Mindeshöhe möchtest, und nur dem IE, dass du eine feste Höhe möchtest - die dieser dann fälschlicherweise wie eine Mindesthöhe interpretiert.min-heigt bringt mir nur was wenn der text besonders lang ist, sobald der text aber sehr kurz ist bringt mir min-height wieder nichts, in diesem fall funktionierts nur mit height.
Doch, du willst eine Mindesthöhe.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
-