nicht angemeldet
DIV mit festem TOP aber variabler Höhe
Hallo!
Wie kann ich mit CSS einen DIV an sagen wir top: 10px; starten lassen, aber ihn so hoch einstellen, dass er genau an das untere Ende des Anzeigebereichs stößt?
mfg,
Tim Braum
-
Wie kann ich mit CSS einen DIV an sagen wir top: 10px; starten lassen, aber ihn so hoch einstellen, dass er genau an das untere Ende des Anzeigebereichs stößt?
Der untere Fensterrand ist keine in CSS vorgesehene Markierung. Du kannst im Tabellenlayout mit height="100%" arbeiten. Für alle anderen unteren Enden gibt es zu top ein Gegenstück namens bottom.
-
...Du kannst im Tabellenlayout mit height="100%" arbeiten.
Für Tabellen gibt es kein height Attribut.
-
-
Hi!
Hallo!
Wie kann ich mit CSS einen DIV an sagen wir top: 10px; starten lassen, aber ihn so hoch einstellen, dass er genau an das untere Ende des Anzeigebereichs stößt?
Das geht leider (noch?) nicht. Du könntest jedoch ein wenig tricksen: Wenn es um den Hintergrund geht, der bis zum Ende der Seite gehen soll, kannst du dem dem Body ein Hintergrundbild geben, das genau so breit wie das div ist.
Mittels repeat:repeat-y; kannst du das Bild (das somit nur einige Pixel groß sein muss) wiederholen lassen.Grüße,
Fabian St.--
Endlich online: http://fabis-site.net
--> XHTML, CSS, PHP-Formmailer, Linux
Selfcode: ie:% fl:| br:^ va:) ls:& fo:) rl:( n4:° ss:| de:> js:| ch:| mo:) zu:) -
Hallo Tim,
Wie kann ich mit CSS einen DIV an sagen wir top: 10px; starten lassen, aber ihn so hoch einstellen, dass er genau an das untere Ende des Anzeigebereichs stößt?
indem Du ihm das Attribut 'bottom:0' verpasst. Leider versteht das offenbar der IE6 nicht, sodass eher die folgende Lösung in Betracht kommt:
<!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" lang="de" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-15"></meta>
<title>test</title>
<style type="text/css">
head {height:100%;padding:0}
body {margin:0;padding:0;height:100%;background-color:#eee}
#dv1 {
background-color:green;
top:2%;
height:98%;
width:100%;
position:absolute;
margin:0;
padding:0}
</style>
</head>
<body>
<div id="dv1">
Hier steht etwas Text.
</div>
</body>
</html>tschau, ziegenmelker
-
Hallo,
so reicht das doch schon...
so sind es dann auch imemr 10px...
bei dein Beispiel... waren es nicht imemr 10px...
je nachdem wie gross bei mir das Fenster war...
wurden es immer mehr px<style type="text/css">
body{
padding:0;
margin: 0;
height:100%;
background-color:#eeeeee;
}
#dv1{
background-color:green;
top:10px;
height:100%;
width:100%;
position:absolute;
}
</style>-
Hallo,
so reicht das doch schon...
nein, siehe unten
so sind es dann auch imemr 10px...
bei dein Beispiel... waren es nicht imemr 10px...ja
je nachdem wie gross bei mir das Fenster war...
wurden es immer mehr pxja
<style type="text/css">
body{
padding:0;
margin: 0;
height:100%;
background-color:#eeeeee;
}
#dv1{
background-color:green;
top:10px;
height:100%;
width:100%;
position:absolute;
}
</style>Dies ergibt im IE6 und im Mozilla 1.7.1 einen hässlichen Rollbalken an der rechten Seite, und zwar, weil 100% + 10px nun mal mehr ist als 100%. Die Lösung, dass der Wert für top sich mit der Größe des Browserfensters ändert, halte ich für nicht weiter problematisch und ist ja nur durch die vermutlich gewünschte Kompatibilität mit dem veralteten IE6 verursacht.
cu, ziegenmelker
-
Hallo,
Dies ergibt im IE6 und im Mozilla 1.7.1 einen hässlichen Rollbalken an der rechten Seite, und zwar, weil 100% + 10px nun mal mehr ist als 100%.
Stimmt.. seh ich jetzt auch erst :-(
Die Lösung, dass der Wert für top sich mit der Größe des Browserfensters ändert, halte ich für nicht weiter problematisch und ist ja nur durch die vermutlich gewünschte Kompatibilität mit dem veralteten IE6 verursacht.
hm...
wie könnte man es denn für Firefox/Mozilla und Opera lösen?-
Hallo,
wie könnte man es denn für Firefox/Mozilla und Opera lösen?
z.B. so:
#dv11 {
background-color:green;
top:10px;
bottom:0;
left:0;
right:0;
position:absolute;
min-height:600px
}
Im Opera kann ich es mir im Moment leider nicht ansehen. Im Moz ist es perfekt und die (CSS2) Angabe min-height garantiert noch dazu das Auftauchen von Rollbalken, wenn die angegebene Höhe unterschritten wird.cu, ziegenmelker
-
Hallo,
ich hab es mal been so getestet
<style type="text/css">
#dv1{
background-color:green;
top:10px;
bottom:0;
left:0;
right:0;
position:absolute;
min-height:600px
}
</style>
<!--[if gte IE 5]>
<style type="text/css">head{
height:100%;
padding:0
}
body{
margin:0;
padding:0;
height:100%;
background-color:#eee
}
#dv1{
top:2%;
height:98%;
width:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="dv1">
Hier steht etwas Text.
</div>im Internet Explorr sieht es so aus wie vorher...
im Firefox so wie es aussehen soll (mit den 10px oben)
im Opera 7.54 hab ich rechts einen Abstand von 15pxwenn ich nur deine Variante nehme, änder sich in Opera nix
Screenshot
<img src="http://vip-treffen.de/div.png" border="0" alt="">-
Hallo,
im Opera 7.54 hab ich rechts einen Abstand von 15px
Die Browser haben afaik unterschiedliche default Werte für margin und padding, Du solltest daher die style Anweisungen für head und body nicht in den conditional comment für den IE einschliessen, sondern in den Bereich für alle Browser schreiben. Dann wird es wohl auch im Opera richtig gerendert.
cu, ziegenmelker
-
hi,
Die Browser haben afaik unterschiedliche default Werte für margin und padding,
ja, teilweise.
Du solltest daher die style Anweisungen für head und body nicht in den conditional comment für den IE einschliessen, sondern in den Bereich für alle Browser schreiben. Dann wird es wohl auch im Opera richtig gerendert.
welchen einfluss sollen margin/padding des body (und ggf. auch von html - es f _head_ anzuwenden, wie im beispiel, halte ich für sinnfrei) denn bitte auf ein _absolute_ positioniertes element haben?
gruß,
wahsaga--
I'll try being nicer if you'll try being smarter.-
Hallo,
[...]
welchen einfluss sollen margin/padding des body (und ggf. auch von html - es f _head_ anzuwenden, wie im beispiel, halte ich für sinnfrei) denn bitte auf ein _absolute_ positioniertes element haben?das frage ich mich auch gerade *g*
-
hi,
welchen einfluss sollen margin/padding des body (und ggf. auch von html - es f _head_ anzuwenden, wie im beispiel, halte ich für sinnfrei) denn bitte auf ein _absolute_ positioniertes element haben?
ich habe eben mal nachgelesen :(
...Absolutely positioned boxes are taken out of the normal flow....
Also: Keinentschau, ziegenmelker
-
Hallo,
welchen einfluss sollen margin/padding des body (und ggf. auch von html - es f _head_ anzuwenden, wie im beispiel, halte ich für sinnfrei) denn bitte auf ein _absolute_ positioniertes element haben?
ich habe eben mal nachgelesen :(
...Absolutely positioned boxes are taken out of the normal flow....
Also: Keinenund wie kann man das Problem in Opera lösen?
-
Hallo,
und wie kann man das Problem in Opera lösen?
ich habe es vorhin im neuesten Opera(7.54) getestet, und es gab keine Darstellungsprobleme.
cu, ziegenmelker
-
Hi,
Irrtum, habe auch einen Rand auf der rechten Seite. Mal sehen, was ich da noch rausfinden kann.cu, ziegenmelker
-
-
Hallo,
und wie kann man das Problem in Opera lösen?
den styles für das div noch den Wert 'width:100%' hinzufügen. Opera hat offenbar Probleme mit 'right:0', Du kannst den Wer für 'right' dafür weglassen. Mozilla stellt es auch weiterhin richtig dar, ist halt imho der beste Browser zur Zeit.
cu, ziegenmelker
-
Hallo,
und wie kann man das Problem in Opera lösen?
den styles für das div noch den Wert 'width:100%' hinzufügen. Opera hat offenbar Probleme mit 'right:0', Du kannst den Wer für 'right' dafür weglassen. Mozilla stellt es auch weiterhin richtig dar,das mit width:100% hätte mir auch so einfallen können *g*
ist halt imho der beste Browser zur Zeit.
ich vermisse dort aber
Mausgesthen
bei Opera kann ich die Search-Leiste in einer ini-Datei bearbeiten
http://www.opera.com/support/tutorials/operashow/ mit F11 öffnen <-- das kann Mozilla auch nicht
STRG+F12 um Einstellungen mit wenigen Klicks zu ändern
Authoren/Benutzermodus
Bilder mit einen Mausklick aktivieren/deaktivieren, bzw. auf Cachenutzung umschalten
etc.solche Sachen hab ich im Mozilla/Firefox noch nicht gefunden bzw. gibt es erst gar nicht
-
Hallo,
ich vermisse dort aber
Mausgesthenimho gibt es das für den Moz auch.
bei Opera kann ich die Search-Leiste in einer ini-Datei bearbeiten
http://www.opera.com/support/tutorials/operashow/ mit F11 öffnen <-- das kann Mozilla auch nicht
STRG+F12 um Einstellungen mit wenigen Klicks zu ändern
Authoren/BenutzermodusTools...Switch Profile
Bilder mit einen Mausklick aktivieren/deaktivieren, bzw. auf Cachenutzung umschalten
etc.solche Sachen hab ich im Mozilla/Firefox noch nicht gefunden bzw. gibt es erst gar nicht
Für mich sind JavaScript Console, DOM Inspector und JavaScript Debugger viel wichtiger.
Vom selfhtml-team(?) gibt es übrigens auch zwei sidebars zu XHTML/CSS.cu, ziegenmelker
-
Hallo,
ich vermisse dort aber
Mausgesthen
imho gibt es das für den Moz auch.
bei Opera kann ich die Search-Leiste in einer ini-Datei bearbeiten
http://www.opera.com/support/tutorials/operashow/ mit F11 öffnen <-- das kann Mozilla auch nicht
STRG+F12 um Einstellungen mit wenigen Klicks zu ändern
Authoren/Benutzermodus
Tools...Switch Profile
Bilder mit einen Mausklick aktivieren/deaktivieren, bzw. auf Cachenutzung umschalten
etc.
http://prefbar.mozdev.org/solche Sachen hab ich im Mozilla/Firefox noch nicht gefunden bzw. gibt es erst gar nicht
jo... den ganzen Kram muss man sich zusammensuchen etc.
da find ich Opera um einiges besser ;)Für mich sind JavaScript Console, DOM Inspector und JavaScript Debugger viel wichtiger.
wir haben doch eh alle mehrere Browser auf'n Rechner, für sowas kann er besser sein, aber zum surfen nehme ich doch lieber Opera
da macht das Gesamtpaket ein besseren Eindruck *g*
-
-
-
-
-
-
Hi,
welchen einfluss sollen margin/padding des body (und ggf. auch von html - es f _head_ anzuwenden, wie im beispiel, halte ich für sinnfrei) denn bitte auf ein _absolute_ positioniertes element haben?
der IE6 stellt das div nicht wie gewünscht dar, wenn im body-style nicht explizit 'height:100%;margin:0' angegeben wird. Vermutlich ein bug.
tschau, ziegenmelker
-
-
-
-
-
-
-
-