min-height:page ?
Dominik Amon
- css
Hallo
Ich habe ein paar DIV-Tags die parallel neben einander liegen. In einem davon habe ich den eigentlichen Content der über eine Bildschirmseite hinweg geht (variable länge).
Ich möchte/muss die Div-Tags die neben dem Content liegen, genau so hoch machen wie dieses Conent-Div
mit height geht es über eine Bildschirmseite, min-height zieht nicht, weil der Inhalt der "Paralell"-Divs ja nicht die selbe Länge des Contentdivs haben.
Gibt es sowas in der Richtung wie min-height:page (bis zum Ende der Seite, nicht des Bildschirms) oder sowas ähnliches?
Danke für Infos,
dominik
Hi,
Ich habe ein paar DIV-Tags die parallel neben einander liegen. In einem davon habe ich den eigentlichen Content der über eine Bildschirmseite hinweg geht (variable länge).
Ich möchte/muss die Div-Tags die neben dem Content liegen, genau so hoch machen wie dieses Conent-Div
mit height geht es über eine Bildschirmseite, min-height zieht nicht, weil der Inhalt der "Paralell"-Divs ja nicht die selbe Länge des Contentdivs haben.
Gibt es sowas in der Richtung wie min-height:page (bis zum Ende der Seite, nicht des Bildschirms) oder sowas ähnliches?
du kannst beide divs in ein übergeordnetes div reintun und dem height:100%; zuweisen. Das andere zieht durch seinen Inhalt das übergeordnete div soweit in die Länge wie nötig.
Schöne Grüße
Julian
Hallo
du kannst beide divs in ein übergeordnetes div reintun und dem height:100%; zuweisen. Das andere zieht durch seinen Inhalt das übergeordnete div soweit in die Länge wie nötig.
hab deinen Vorschlag mal probiert, hat leider nicht geklappt:
http://www.amon.cc/Projects/proofofconcept/DivElement.htm
Wenn du dir die Seite mit dem IE ansiehst, geht auf der linken seite, der Rote balken bis ans Ende der Seite (gewünschter Effekt)
das versuche ich mit dem Firefox auch hinzubekommen - hat aber leider nicht geklappt :-(
danke für Infos,
dominik
Hi,
das versuche ich mit dem Firefox auch hinzubekommen - hat aber leider nicht geklappt :-(
display:table-cell für die benachbarten divs
cu,
Andreas
hallo
display:table-cell für die benachbarten divs
klappt nicht, Beispiel aktualisiert:
http://www.amon.cc/Projects/proofofconcept/DivElement.htm
lg,
dominik
Hi,
display:table-cell für die benachbarten divs
klappt nicht, Beispiel aktualisiert:
http://www.amon.cc/Projects/proofofconcept/DivElement.htm
Irgendwas machst Du falsch:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Testseite</title>
<style type="text/css">
#c1,#c2,#c3 { display:table-cell; border:3px solid red; }
</style>
</head><body>
<div id="c1">wenig Text</div><div id="c2">viel Text</div><div id="c3">wenig Text</div>
</body>
erzeugt im Firefox drei gleich hohe Boxen, auch wenn unterschiedliche Textmengen in den divs stecken.
cu,
Andreas
Hallo!
Das entspricht eh in etwa dem, was in der SelfHTML Doku steht - Rufst du dein Codebeispiel jetzt wieder mit dem Internet Explorer auf, sind die drei Divs wieder untereinander :-(
lg,
dominik
Hi,
Das entspricht eh in etwa dem, was in der SelfHTML Doku steht - Rufst du dein Codebeispiel jetzt wieder mit dem Internet Explorer auf, sind die drei Divs wieder untereinander :-(
Natürlich - der IE ist zu blöd für display:table-cell.
Aber für den IE hattest Du doch schon eine Lösung.
Kombiniere die beiden mit einer entsprechenden CSS-Weiche.
cu,
Andreas
Hello out there!
display:table-cell für die benachbarten divs
Das wirkt AFAIK nur, wenn die display-Eigenschaft eines Vorfahrenelements den Wert 'table' hat.
See ya up the road,
Gunnar
Hallo
Das wirkt AFAIK nur, wenn die display-Eigenschaft eines Vorfahrenelements den Wert 'table' hat.
es funktioniert auch nicht in meinem Beispiel :-(
lg,
dominik
Hello out there!
es funktioniert auch nicht in meinem Beispiel :-(
Ach, und die display-Eigenschaft welches Elements hat bei dir den Wert 'table'?
Übersichtlicher Quelltext wäre auch hilfreich. Verzichte auf style-Attribute; notiere sämtliche Angaben gesammelt im zentralen Stylesheet (style-Element oder externe Datei).
See ya up the road,
Gunnar
Ich habe mir den entsprechenden Eintrag aus der SelfHTML Doku rausgesucht:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display
bzw.
http://de.selfhtml.org/css/eigenschaften/anzeige/display2.htm
Funktioniert nur im Mozilla, aber wieder nicht im Internet Explorer - Sobald man hier float:left definiert, funktionierts auch schon wieder nicht mehr :-(
Hi,
display:table-cell für die benachbarten divs
Das wirkt AFAIK nur, wenn die display-Eigenschaft eines Vorfahrenelements den Wert 'table' hat.
Nö.
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes sagt doch explizit, daß die fehlenden Elemente automatisch erzeugt werden ...
cu,
Andreas
Hello out there!
http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes sagt doch explizit, daß die fehlenden Elemente automatisch erzeugt werden ...
Wieder was gelernt. Ich war dieser Meinung, weil die vertikale Zentrierung so funktioniert:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEST</title>
<style type="text/css">
[code lang=css] body, html {
height: 100%;
margin: 0;
padding: 0;
}
body {
display: table-cell;
vertical-align: middle;
}
html {
display: table;
}
</style>
</head>
<body>
<p>foo</p>
</body>
</html>[/code]
ohne
html {
display: table;
}
jedoch nicht.
Aber kann ja auch nicht. Die Objekte, die 'table-row' und 'table' entsprächen, lägen ja zwischen html und body und wüssten wohl nichts von einer Höhenangabe 100%.
See ya up the road,
Gunnar