dynamisch lange inhalte, mit fester "startgröße"
jghj
- css
0 Cheatah0 jghj0 Cheatah
0 Ingo Turski0 Cheatah0 Ingo Turski0 Cheatah
Hallo.
Ich sitz hier grad annem problem: ich habe einen content-teil, der soll mindestens 450 pixel hoch sein. d.h. wenn weniger content drin is, soll er 450 hoch sein, und sich dann dynamisch vergrößern (durch die Textgröße).
außerdem soll die nächste eben am ende des contents kleben (hab ich mit 'position: relative;' probiert, da hängt er aber nur an der height einstellung der content-ebene.
Ich hoffe ihr könnt mir helfen
Hi,
Ich sitz hier grad annem problem: ich habe einen content-teil, der soll mindestens 450 pixel hoch sein.
"mindestens hoch" bzw. "Mindesthöhe" übersetzen wir mal schnell ins Englische, und schon sind wir bei der "minimum height" bzw. "min-height". Ist doch so schwer nicht, oder?
Cheatah
danke schonmal für eure hilfe.
Ich kannte "min-height" noch nicht.
jetzt hab ich nurnoch das Problem, dass der bottom an die min-height drangeklatscht wird. egal ob die höhe "overflowed" wurde oder nicht.
was kann ich da machen?
Hi,
jetzt hab ich nurnoch das Problem, dass der bottom an die min-height drangeklatscht wird. egal ob die höhe "overflowed" wurde oder nicht.
bitte was?
Cheatah
Hallo Cheatah,
egal ob die höhe "overflowed" wurde oder nicht.
bitte was?
Ich finde das war jetzt "superfluous"!
Gruß Gernot
Hi,
egal ob die höhe "overflowed" wurde oder nicht.
bitte was?
Ich finde das war jetzt "superfluous"!
ich habe die gesamte Aussage nicht verstanden. Der von Dir zitierte Teil ist mir dabei am wenigsten unklar. Was also meinst Du mit Deinem Einwand?
Cheatah
Hallo Cheatah,
ich habe die gesamte Aussage nicht verstanden. Der von Dir zitierte Teil ist mir dabei am wenigsten unklar. Was also meinst Du mit Deinem Einwand?
dann entschuldige bitte, dann habe ich dich missverstanden: In der Tat, die Aussage
jetzt hab ich nurnoch das Problem, dass der bottom an die min-height drangeklatscht wird.
ist auch sehr unveständlich.
Gruß Gernot
ok ich sags nu nochmal :-) (hoffentlich mit mehr erfolg)
mein design ist so aufgebaut: top/content/bottom
top hat eine feste höhe
content eine mit min-height definierte
und bottom wieder eine feste
bottom soll aber immer unter content liegen und nicht mittendrin. Also habe ich position: relative angegeben.
Jetzt habe ich bei content min-height: 450; angegeben. Also macht er mir "bottom" bei den 450 pixel, egal ob sich der Content vergrößert hat oder nicht. Also wenn der Content durch text sagen wir auf 550 pixel vergrößert wurde, hängt bottom immernoch bei 450. also mitten im "Content" und das will ich nicht so haben ;-)
ich hoffe ihr konntet mich jetzt verstehen ;)
Hallo jghj,
bottom soll aber immer unter content liegen und nicht mittendrin. Also habe ich position: relative angegeben.
Das führt auf Abwege. Ich habe will mir jetzt auch angewöhnen, Position immer erst als letzten Rettungsanker zu benutzen, wenn alle anderen Künste mit margin, padding, (min-/max-)height, (min-/max-)width, display, float, clear versagen.
Jetzt habe ich bei content min-height: 450; angegeben. Also macht er mir "bottom" bei den 450 pixel, egal ob sich der Content vergrößert hat oder nicht. Also wenn der Content durch text sagen wir auf 550 pixel vergrößert wurde, hängt bottom immernoch bei 450. also mitten im "Content" und das will ich nicht so haben ;-)
ich hoffe ihr konntet mich jetzt verstehen ;)
Wie das schwer zu beschreibende Problem mit viel Content bei dir aussah, kann man sich vorstellen, wenn man bei der folgenden Lösung den Star-HTML-Hack für den IE weglässt und stattdessen die dortige Height-Angabe mit in die übrigen Definitionen für #content schreibt.
<!doctype html public "-//W3C//DTD HTML 4.0 //EN">
<html>
<head>
<title>minheight</title>
<meta name="author" content="Gernot Back">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<style type="text/css">
[code lang=css]
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
#top, #bottom {
height:100px;
background:#FFFFEE;
}
#content {
min-height:450px;
background:#DDEEFF;
}
* html #content {
height:450px;
}
</style>
</head>
<body>
<div id="top">Top</div>
<div id="content">Ganz viel oder wenig Content.</div>
<div id="bottom">Bottom</div>
</body>
</html>
[/code]
Gruß Gernot
Hi,
ich hoffe ihr konntet mich jetzt verstehen ;)
nein. Du hast insbesondere noch nicht die Frage beantwortet, warum es gerade 450px sein sollen.
Und Du hast Dir offenbar auch einige andere zielweisende Antworten hier noch nicht berücksichtigt. Das einfachste wäre wohl, eine Beispielseite online zu stellen und evtl. eine Grafik die zeigt, wie es aussehen sollte.
freundliche Grüße
Ingo
also ich habe in meinem design einen header, einen content, und einen bottom. (also nen balken der unter dem design klebt).
in dem style des bottoms hab ich position: relative angegeben. Jetzt hängt der genau unter der min-height vom content.
wenn content aber overflowed (also größer wird) hängt sich bottom nicht drunter, sondern bleibt bei der 450
Hi,
ich habe einen content-teil, der soll mindestens 450 pixel hoch sein.
warum gerade 450px?
d.h. wenn weniger content drin is, soll er 450 hoch sein, und sich dann dynamisch vergrößern (durch die Textgröße).
Wenn Du ein Element mit dieser Höhe drin hast, welches nicht aus dem Fluß genommen ist, dann hast Du das automatisch.
freundliche Grüße
Ingo
Hi,
Wenn Du ein Element mit dieser Höhe drin hast, welches nicht aus dem Fluß genommen ist, dann hast Du das automatisch.
wenn Du einem Element eine Höhe zuweist, dann weist Du ihm eine Höhe zu, nicht etwas anderes. Es wird diese Höhe beibehalten, auch wenn der overflow-Fall eintritt. Nicht im IE, aber das ist ein anderes Thema.
Cheatah
Hi,
wenn Du einem Element eine Höhe zuweist, dann weist Du ihm eine Höhe zu, nicht etwas anderes. Es wird diese Höhe beibehalten, auch wenn der overflow-Fall eintritt. Nicht im IE, aber das ist ein anderes Thema.
irgendwie verstehe ich Deinen Einwand in Bezug auf die Fragestellung nicht.
Gegeben ist ein Container, der mindestens 450px hoch sein soll bzw. bei mehr Textinhalt höher werden soll. Meine vordringliche und noch nicht beantworte Frage war, warum das so sein soll. Ich könnte mir dabei z.B. ein floatendes img vorstellen - in diesem Fall wäre dann ein Hinweis auf die Wiederherstellung des Elementenflusses sinnvoller als pauschal auf min-height zu verweisen, zumal ohne den Zusatz, daß das im IE nicht funktioniert.
freundliche Grüße
Ingo
Hi,
Gegeben ist ein Container, der mindestens 450px hoch sein soll bzw. bei mehr Textinhalt höher werden soll. Meine vordringliche und noch nicht beantworte Frage war, warum das so sein soll.
gegen diese Frage wende ich auch beileibe nichts ein. Deine Aussage, ein mit einem festen height-Wert versehenes Element würde sich in der Höhe anpassen, widerspricht aber meinem Verständnis von CSS; ich halte sie für falsch und somit korrigierungswürdig (und -nötig). Oder ich habe Dich nur falsch verstanden, dann wäre ich über eine Aufklärung dankbar.
Ich könnte mir dabei z.B. ein floatendes img vorstellen - in diesem Fall wäre dann ein Hinweis auf die Wiederherstellung des Elementenflusses sinnvoller
Hm, hier ist Deine Phantasie offenbar mächtiger als meine, denn diese Idee kommt mir beim Lesen des Ursprungsposts auch jetzt noch nicht.
als pauschal auf min-height zu verweisen, zumal ohne den Zusatz, daß das im IE nicht funktioniert.
Das steht auf der verlinkten Seite.
Cheatah
Hi,
Deine Aussage, ein mit einem festen height-Wert versehenes Element würde sich in der Höhe anpassen, widerspricht aber meinem Verständnis von CSS; ich halte sie für falsch und somit korrigierungswürdig (und -nötig). Oder ich habe Dich nur falsch verstanden, dann wäre ich über eine Aufklärung dankbar.
wo bzw. wie hast Du das denn nur herausgelesen?
Wenn Du ein Element mit dieser Höhe drin hast, welches nicht aus dem Fluß genommen ist, dann hast Du das automatisch.
Verstehe "drin hast" als "sich in diesem Container befindet" und "hast Du das automatisch" i.V. mit der Fragestellung als "erweitert sich dieser Container".
als pauschal auf min-height zu verweisen, zumal ohne den Zusatz, daß das im IE nicht funktioniert.
Das steht auf der verlinkten Seite.
und wurde dort offenbar nicht zur Kenntnis genommen. ;-)
freundliche Grüße
Ingo