[CSS] 3-reihiges layout

**stun** · 29.12.2004, 15:11

zusatz: ichhabe noch eine kleine skizze eingefügt!

Angehängte Dateien

untitled-1.gif (2,5 KB, 96x aufgerufen)

**Kropff** · 29.12.2004, 15:11

ohne das jetzt selber getestet zu haben, gib dem content mal ein height: auto und overflow:auto, vielleicht klappt das.

gruss
peter

**stun** · 29.12.2004, 15:26

leider funktioniert es nicht...
mir ist soeben ein trick eingefallen. ich hinterlege die seite mit einer ebene deren höhe der summe aller drei anzeigeebenen entspricht. das funktioniert soweit der content eine feste pixel-höhe hat. aber dennoch fehlt mir eine lösung für eine content-ebene mit variabler höhe.

**goth** · 29.12.2004, 15:46

Vielleicht als Denkansatz ... funktioniert allerdings nur ich richtigen Browsern (Opera, Firefox) ... auf gar keinen Fall im IE ... !

PHP-Code:


<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">

    <head>

        <title>Test</title>

        <style type="text/css">

        <!--

        body {

            text-align: center;

        }

        #master {

            position: relative;

            margin-left: auto;

            margin-right: auto;

            width: 800px;

            height: 400px;

            border: solid 1px black;

        }

        #header, #content, #footer {

            position: absolute;

            left: 0px;

            width: 100%;

        }

        #header {

            border: solid 1px red;

            top: 0px;

            height: 50px;

        }

        #content {

            top: 60px;

            height: auto;

            max-height: 280px;

            overflow: auto;

            border: solid 1px green;

        }

        #footer {

            border: solid 1px blue;

            bottom: 0px;

            height: 50px;

        }

        //-->

        </style>

    </head>

    <body>

        <div id="master">

            <div id="header">

                Header

            </div>

            <div id="content">

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content<br/>

                Content

            </div>

            <div id="footer">

                Footer

            </div>

        </div>

    </body>

</html>

**stun** · 29.12.2004, 16:07

Ich war wohl etwas vorschnell, meine Lösung funktioniert nicht. Der Footer schiebt sich über den Content, obwohl eine Scrolleiste sichtbar wird.

@goth
Bei deinem Ansatz wird der Footer nicht unten angeordnet. Außerdem ist es leider so, dass doch noch sehr viele User den IE verwenden

**goth** · 29.12.2004, 16:10

Doch ... nur im IE eben nicht ... weil der etwas blöde ist ...

**stun** · 29.12.2004, 16:23

Nein... Schau selbst

Angehängte Dateien

untitled-2.gif (9,1 KB, 84x aufgerufen)

**TobiaZ** · 29.12.2004, 17:00

hab den code grad blind in ff0.9 gepasted. geht echt net.

**stun** · 29.12.2004, 17:02

die einzige möglichkeit die mir noch einfällt wären frames... aber das ist wohl das letzte sein worauf man setzen sollte.

**Hopka** · 29.12.2004, 18:45

http://www.alistapart.com/articles/footers/

**stun** · 29.12.2004, 19:45

auf dieser seite war ich auch schon. die einzig mögliche lösung basiert auf javascript und ist nicht 100% zufriedenstellend...

**goth** · 29.12.2004, 23:33

Original geschrieben von stun
Nein... Schau selbst

Ich bezog mich allerdings auf Deinen eigenen "Trick" ... natürlich wird die Gesamthöhe des Bereichs durch einen Layer namens "master" festgelegt ... ein height: 100%; gibt's leider nicht ... !

[CSS] 3-reihiges layout