DIV einseitig an Fenstergröße anpassen

Rodney2k · 11 Juni 2008

Hallo Leute,

ich suche eine Möglichkeit, dass mein DIV bis an den unteren Browserrand geht, unabhängig davon bei welcher Position es beginnt. Die Höhe kann also varieren, es soll aber immer an dem unteren Rand des vom Browser zur verfügung gestellten Platzes ansetzen.

Über diesem DIV gibt es noch weitere andere Elemente, die aber für mein Vorhaben keine Rolle spielen sollten. Falls weniger Platz zur Verfügung steht, als benötigt wird, soll mit "overflow: auto" Scrollbalken angezeigt werden.

Ich habe schon mit CSS und Bottom herumprobiert, was aber überhaupt nicht funktioniert hat. Ich bin nun fast der Ansicht, dass ich Javascript brauche, damit könnte ich auch die entsprechende Position des Bottom-Punktes bestimmen, aber wie mache ich dann weiter?

1laco · 11 Juni 2008

braucht man da nicht eigentlich nur die höhe (hight) auf 100% zu setzen? die punkte (top und left oder right und width - wenn definiert) sind je gegeben und werden sich nicht ändern

- eigentlich -

neuroleptika · 11 Juni 2008

hi rodney, hi 1laco,

1laco schrieb:
- eigentlich -

Naja, welches Element meinst du denn?
Wenn die untere Box 100% hoch ist, wird sie nicht in das Anzeigefenster Passen.
Wenn ein Umschließendes Element height: 100% hat, müßte mann wissen wie viel Platz mann unten für die untere Box lassen muß.
html

Code:

<div id="alles">
<div id="inhalt">
<h1>Inhalt</h1>
<p>
Lorem ipsum no has veri verear interpretaris....
</p>
</div><!--Ende #inhalt-->
<div id="box">
<p>
<strong>Unten</strong>
</p>
</div><!--Ende #box-->

</div><!--Ende #alles-->

css

Code:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

/*gesamte Box (Ausgangspunkt von position:absolute für #box)*/
#alles {
position: relative;
min-height: 100%;
}

#inhalt {
padding-bottom: 30px;
}

/*untere box*/
  #box {
position: absolute;
bottom: 0;
left: 0;
background-color: #6AA3AE;
min-height: 20px;
width: 100%;
}

So wird die #box immer unten angezeigt und weicht nach unten aus wenn der darüber liegende Bereich mehr Platz in Anspruch nimmt.
Nur müßte mann wissen wie hoch #box ist (für padding-bottom von #inhalt) damit die Inhalte sich nicht übereinander schieben.

Du könntest mit background-image für <body> den Anschein erwecken, als ob der Footer immer bis nach unten reicht. Den restlichen Inhalt übermalst du mit background-color oder background-image.

Wie man das genau macht hängt auch davon ab, ob der Inhalt von der unteren Box am oberen oder unteren Rand ausgerichtet werden soll.

DIV einseitig an Fenstergröße anpassen

Rodney2k

Neues Mitglied

1laco

Neues Mitglied

neuroleptika

Aktives Mitglied

Neueste Beiträge