Franz Gsell: Spalten Layout fensterfüllend

SELF-Forum

Spalten Layout fensterfüllend

Franz Gsell
– Informationen zu den Bewertungsregeln

Hallo zusammen, ich verwende CSS um meine Seite in drei Spalten aufzuteilen. Die linke und rechte Spalte werden nur mit Farbe gefüllt und der eigentliche Content kommt in die mittlere. Nun hätte ich gerne das alle Spalten die komplette Höhe des Browsers ausfüllen. Dies funktioniert auch bis zu dem Zeitpunkt, ab dem der Content so viel wird, das man scrollen muss. Wie man an dem Beispiel sieht, wird beim Scrollen der Div nicht "verlängert" (ist nicht mit farbe ausgefüllt). Mit Frames würde das ganze einfach funktionieren. Kann mir jemand helfen wie ich das Verhalten auch mit CSS hinbekomme. Ich habe mein aktuellen Beispielcode angehängt:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Horizontal und vertikal zentriertes Element</title>
<style type="text/css">
<!--
html, body {
 margin-left: 0px;
 margin-top: 0px;
 margin-right: 0px;
 margin-bottom: 0px;
 height: 100%;
}
#wrapper {
position: relative;
width: 100%
height: auto;
}
#zentriert {
 position:absolute;
 top:0px;
 left:50%;
 height: 100%;
 width:838px;
 margin-left:-419px;
 background-color: #FCF6DD;
}

#border_left {
 position:absolute;
 top:0px;
 left:50%;
 height: auto;
 width:20px;
 margin-left:-439px;
 background-color: #00FF99;
}

#border_right {
 position:absolute;
 top:0px;
 left:50%;
 height: 100%;
 width:40px;
 margin-left:419px;
 background-color: #00FF99;
}

body {
 background-color: #717171;
}
-->
</style>
</head>
<body>
<!--<div id="border_left">
</div>-->
<div id="zentriert">
  <p>
  <!--<div id="border_right">-->
    a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>&nbsp;</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>&nbsp;</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>a</p>
  <p>&nbsp;</p>
  <p>aa</p>
  <p>&nbsp;</p>
</div>
</div>
</body>
</html>

Vielen Dank im voraus,
Franz

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Spalten Layout fensterfüllend

    imho_tep
    – Informationen zu den Bewertungsregeln

    Hallo zusammen, ich verwende CSS um meine Seite in drei Spalten aufzuteilen. Die linke und rechte Spalte werden nur mit Farbe gefüllt und der eigentliche Content kommt in die mittlere. Nun hätte ich gerne das alle Spalten die komplette Höhe des Browsers ausfüllen. Dies funktioniert auch bis zu dem Zeitpunkt, ab dem der Content so viel wird, das man scrollen muss.

    Hallo Franz Gsell,

    google mal nach "faux columns".

    Best wishes, imho_tep

    --
    Es geht aufwärts, sagte der Fisch, als er an der Angel hing.
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln