• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Css undendliche div Box

Status
Für weitere Antworten geschlossen.

oTreck

Neues Mitglied
Ich habe so eine div box gemacht. Nun will ich ich mozilla firefox es so machen. Wenn ich jetzt da viel text reinschriebe. Soll die div box und demm entsprechend runtergehen. Wie mach ich das.

was muss ich da noch einfügen?
* {
margin: 0;
padding: 0;
}


body {

text-align: center;

}



#container {

width: 800px;
height: 100%;
margin: 0 auto;
padding: 0;
background-color: #00FF00;
 
Werbung:
Werbung:
schön wäre es, in mozilla firefox browser funktioniert das eben nicht.!
ich weiß ja nicht wie dein html Quelltext aussieht, aber so wie meiner dann bestimmt nicht wenn das nicht geht

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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<p id="container">
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
ggggggggggggggg ggggggggg dddddddddddd ssssssss rrrrr d d ddddd ee 
</p>



</body>
</html>
 
Einfach keine Höhe (height) angeben, dann wird sich die box immer nach
unten vergrößern wenn mer inhalt kommt...

Mfg lukiB
 
Werbung:
Jo, er verbietet es ja auch. Mit "height:100%" beschränkt er die Höhe.

Schönes Wochenende,
-Efchen

mmhhh, klär mich auf wenn ich falsch liege, aber wenn er 100% agibt dann ist ja immer 100%, egal wieviel text darin ist, sprich die Box wächst trotzdem kilometerweit nach unten wenn es sein muß.

Nimmt er hingegen ne feste höhe in px, so wirds natürlich nix und der text fließt heraus.

gruß
csstester
 
mmhhh, klär mich auf wenn ich falsch liege, aber wenn er 100% agibt dann ist ja immer 100%, egal wieviel text darin ist, sprich die Box wächst trotzdem kilometerweit nach unten wenn es sein muß.
....
height: 100%; sind 100% vom Elternelement (in diesem Fall body). Das gilt für die meisten Blockelemente.
Da der Standardwert für Blockelemente bei den üblichen Browsern ist:
overflow : visible;.
Deshalb sieht es zunächst so aus, als ob das Element mitwächst.
Wenn mann dem Blockelement ein background-color oder border gibt, kann man das sehr gut sehen.
Der IE 6 hat ein Fehler in der Interpretation von height. Er stellt height als min-height da.
Code:
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }

p {
margin: 0;
padding: 0;
background-color: blue;
min-height: 100%;
  }

/* nur für IE 5- 6 (Sternchenhack)*/
* html p { 
height: 100%;
}
 
tja neuro, wie du ja sehen kannst hat seine css eine background-color, und da ich es nun mit seinem css und meinem Html gecheckt habe... mit wesentlich mehr text, kann ich zumindest sagen im IE7, FF, Opera und Safarie wächst alles sauber mit.
 
Werbung:
Hi csstester,
Das wird nur so angezeigt weil html und body keine Höhenangabe haben.
Das height: 100% von #container hat so keine Auswirkung.

Ich bin davon ausgegangen, dass height: 100% bewirken sollte, dass das Element über das gesamte Browserfenster gezogen wird und bei größerem Inhalt trotzdem mitwächst.

Irgend eine Ursache muß es ja haben, dass oTrack mit seinem Code nicht das gewünschte Ergebnis bekommt. Eine mögliche Ursache währe auch, dass ein umschließendes <div> mit einer Höhenangabe versehen wurde.

Dein Post hat sich für mich so gelesen, als ob height: 100% sich aus dem Inhalt von #container ergibt.
Die Prozentangabe bezieht sich aber auf das Elternelement.
 
Zuletzt bearbeitet:
aahhh, ok, jetzt ist der groschen gefallen;)

Hatte vergessen etwas in den post hineinzuinterpretieren;)

Nee im ernst, ich hatte eigentlich gedacht da gäbe es nur ein prob mit seiner box.. aber naja so sind gleich 2 Fliegen mit einer Klappe erledigt.

Hoffe der Kollege ist nu glücklich;)
 
Werbung:
Status
Für weitere Antworten geschlossen.
Zurück
Oben