Mindesthöhe beliebig nach unten erweiterbar

StSnake · 22.10.2003, 15:38

CSS Frage:

Wie kann ich der Höhe eines Bereichs eine mindeshöhe geben, die sich beliebig mit dem Text vergrössert??

Geht das überhaupt?

Danke schonmal
Steffen

LANtastic · 22.10.2003, 15:49

Naja, es sollte klappen, wenn du dem Element, in dem sich der Text befindet eine Höhe gibst.

Allerdings bin ich mir nicht ganz sicher, ob ich dich richtig verstanden habe.

prefix · 22.10.2003, 17:30

min-height: 300px;

das verstehen alle modernen browser außer - der ie

dafür gibt es zwar javascript-lösungen, davon rate ich aber ab!

an sich stellt der ie einen bereich, den du per height: 400px; definierst, wenn er größer wird mit scrollbars da - das wird dir vmtl. auch nicht gefallen!

StSnake · 23.10.2003, 13:08

Gibt es eine Möglichkeit das auch der Moderne Browser IE das kappiert??

prefix · 23.10.2003, 13:11

naja, es gibt keine super lösung, aber einige ansätze:

http://archivist.incutio.com/viewlist/css-discuss/29073

http://accessat.c-net.us/articles/hide-css_p3.html

usw.! google mal nach "min height ie hack"

prefix · 23.10.2003, 13:26

so, hab die lösung (hier die ausführlichere beschreibung):

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>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#container {
  height: 300px; /* das hier für den ie */
  background-color: red;
 }

/* folgende anweisung wird nicht vom ie interpretiert */
#container[id] {
  height:auto;
  min-height:300px;
}

</style>
</head>

<body>
<div id="container"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
    eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing
    elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
    erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
    eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
    congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
    wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
    dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
    nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
    eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
  congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
    nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
    wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
    lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
    dolor in hendrerit in vulputate velit esse molestie consequat, vel illum
    dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim
    qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
    nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
    volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
    suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel
    eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
    vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto
    odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore
    te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option
  congue nihil imperdiet doming id quod mazim placerat facer possim assum.</p>
</div>
</body>
</html>

StSnake · 23.10.2003, 13:26

Andere Idee:

Hintergundbild 1px breit 300 pc hoch als Hintergund dann habe ich doch auch eine mindestgrösse und das wird dann wenn es mehr text gibt nach unten erweitert oder??

Ich weiss ist nicht so wirklich super aber bis das der IE kann...!!

Steffen

prefix · 23.10.2003, 14:25

hast schon meine lösung gesehen??? hab ich ein paar sekunden vor dir gepostet, daher bist du nicht per mail darüber informiert worden

StSnake · 23.10.2003, 14:52

Habs auch gesehen aber kannst du mir auch sagen was ich dann hier falsch gemacht habe:

#content {
height: 450px; /* das hier für den ie */
min-height: 450px;
height:auto;
}

der IE frisst das net!

prefix · 23.10.2003, 14:54

der ie zieht hier bei "height" die letzte definition (neuere definitionen überschreiben ältere - reihenfolge von oben nach unten) gem. der kaskadierung! logo

er überschreibt die höhe von 450px durch "auto", weil er das ja lesen kann!

du musst den code genauso lassen, wie ich ihn habe - also mit der weiteren definition für #container[id] {}, denn genau das ist der trick dabei!!!!!

StSnake · 23.10.2003, 15:11

Da sieht man mal wieder das "geballte" Fachwissen von Prefix.

Vielen Dank für deine schnelle Hilfe

Aber erklär mir doch mal für was ich da die [id] brauche was bringt das etc.??

Steffen

PS: Wenn das Layout mit Menü fertig ist stelle ich es hier mal rein bisher meine ersten Versuche die sehr an http://www.traum-projekt.com/forum/s...threadid=34619 angelegt sind findet man unter http://www.st-netdesign.de/new

prefix · 23.10.2003, 15:22

hab alles ganz genau hier beschrieben!

im wesentlichen verwendet man den attribut-selektor [...], weil ie den nicht kennt