CSS Ende eines Div-Containers am Browserfenster erzwingen?

AndrewPoison · 2. September 2010

Ich habe ein (so dachte ich) ganz simples Problem. Ich habe ein Div-Container, der eine feste Breite aber variable Höhe hat. Das Div beginnt 300 px unter dem oberen Seitenrand und soll bis zum unteren Seitenrand gehen. Keinen Pixel weniger und auch keinen mehr. Nur bekomme ich das einfach nicht hin.

In das Div soll später der Inhalt rein. Ist der Inhalt kürzer als das Div, soll es trotzdem bis runter gehen - ist er länger, soll er bis runter gehen und dann mittels Scrollbar im Div gescrollt werden.

Code:

#content {
    position:relative;
    top:300px;
    left:15px;
    width:1220px;
    height:500px; [B]<-- die Höhe steht momentan nur zu Testzwecken drin[/B]
    background:url(img/box_transparency.png);
    border:1px solid #726252;
    border-bottom:hidden;
    overflow:auto;
}

Wenn ich ihm sage, er soll in der Höhe 100% nehmen, dann nimmt er sich 100% plus die 300px die er weiter unten anfangen sollte, geht also 300px über das Browserfenster hinaus. Dann hab ich schon probiert mittels Margin das ganze wieder um 300px einzugrenzen, was aber keinerlei (positiven) Effekt zu haben schien. Und feste Werte kann ich auch nicht verwenden, weil die Größe ja von Browser zu Browser, User zu User und Auflösung zu Auflösung unterschiedlich ist.

Wie stell ich das denn nun am dümmsten an? Das letzte mal dass ich intensiver mit CSS gearbeitet hab ist schon wieder etwas her und eigentlich sollten solche Kleinigkeiten kein Problem darstellen aber irgendwie stehe ich heute auf dem Schlauch!

NullPointer · 2. September 2010

Eine Höhe auf diese Weise festzulegen ist leider ganz und gar nicht trivial. Meine erste Idee wäre jetzt, mit Javascript die Größe des Browserfensters auszulesen, daraus die gewünschte Div-Höhe zu berechnen und dynamisch zu setzen. Eine rein CSS-basierte Lösung fällt mir gerade nicht ein.

AndrewPoison · 2. September 2010

Hm... das klingt jetzt nicht gerade ermutigend ^^

JavaScript will ich eigentlich nicht einsetzen, um die Größe festzulegen. Ich überlege noch über generell alternative Möglichkeiten um den gewünschten Effekt zu erzielen, bisher scheitern die aber alle an den Vorstellungen des Designers

Hancock · 2. September 2010

Soll die Seite als ganzes Scrollbar sein?
Sonst würde ich die Übel-Frickel-Lösung mit
position:absolute; margin:0; padding:0; border 0; bottom:0 overflow:auto;
nehmen. Für die Oberkante bzw. rechts/links müsstest du es dann halt je nach nach Layout machen. Was bedeutet, dass du diese Abstände statisch Coden müsstest.

AndrewPoison · 2. September 2010

Eigentlich sollte nur das Div scrollbar sein, allerdings tüftel ich wie erwähnt auch an Alternativen (die, wie schon gesagt, dafür an anderer Stelle Probleme machen).

Jesterfox · 2. September 2010

Die Höhenangaben in CSS sind leider wirklich nicht trivial. Mich wunderts, das 100% überhaupt etwas ergibt das größer als der Inhalt des DIVs ist ;-)

Probier doch mal

position:absolute;
top:300px;
bottom:0;

Das sollte in halbwegs aktuellen Browsern funktionieren, zumindest wenn die Seite insgesamt nicht länger als das Browserfenster wird (ich weiß ja nicht, was sonst noch dargestellt wird)

Fleshgrinder · 2. September 2010

Folgendes funktioniert bei mir.

HTML:

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>CB-Test</title>
  <style type="text/css">
    html,body{height:100%;margin:0;padding:0;font-family:sans-serif}
    p{line-height:1.5em;margin:.5em 0 .6em}
    #content{width:1220px;position:absolute;top:300px;bottom:0;left:15px;padding:0 .5em;border:1px solid #726252;border-bottom:hidden;overflow:auto}
  </style>
</head>
<body>
  <div id="content"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, …</p></div>
</body>
</html>

AndrewPoison · 3. September 2010

@Jesterfox: mh... ich will es nicht beschreien aber das mit bottom:0 scheint zu klappen, zumindest im FF und IE8 (IE7 müsst ich noch testen, aber weiter "abwärtskompatibel" programmier ich aus Prinzip sowieso nicht).

@Fleshgrinder: deins geht ja (auf den ersten Blick) auch auf das bottom:0 zurück, aber wenn ich wieder vor Problemen stehe schau ichs mir nochmal genauer an

Jesterfox · 3. September 2010

Beim IE7 bin ich mir grad auch nicht sicher... der konnte das nur in eine Richtung, weiß aber nimmer ob horizontal oder vertikal. Beim IE6 scheitert beides.

Die anderen Browser können das eigentlich schon länger, wer da noch eine entsprechend alte Version benutzt sollte dringensd updaten ;-)

Suche

CSS Ende eines Div-Containers am Browserfenster erzwingen?

AndrewPoison

Admiral Pro

NullPointer

Lt. Commander

AndrewPoison

Admiral Pro

Hancock

Captain

AndrewPoison

Admiral Pro

Jesterfox

Legende

Fleshgrinder

Lt. Junior Grade

AndrewPoison

Admiral Pro

Jesterfox

Legende

Ähnliche Themen