• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

layout mit variabler höhe und fixem footer

D

drabbit

Neues Mitglied
Hallo zusammen,

ich bin jetzt zwar kein CSS-Neuling, habe aber momentan etwas Probleme mit einer Aufgabenstellung. Ich möchte eine Seite mit 3 horizontalen divs erzeugen, wobei der header eine fixe Höhe hat, der Content variabel sein soll (bei Bedarf soll er eine Scrollbar erhalten) und der footer hat auch eine fixe Höhe und soll immer ganz unten fixiert sein.

layout.jpg

Ich habe auch schon viel versucht mit einem Wrapper über alle 3 divs, bzw. nur über die ersten beiden. Mit min-height und max-height, aber es will einfach nicht klappen...

Hier noch mein letzter Code:
HTML: 
<html>
<head>
    <title>Titel</title>
<style type="text/css">

body{
    height: 100%;
    width:     100%;
    background-color:    #ccc;
    margin: 0 auto;
}

#wrapper{
    width: 1024px;
    min-height:768px;
    margin: 0 auto;
    background: #000;
}

#suche{
    height: 239px;
    background-color: #fff;
    float:left;
}

#liste{
    float:left;
    overflow-y:scroll;
    min-height:365px;
    color:#fff;
    width: 1024px;
}

#warenkorb{
    height: 164px;
    float:left;
    position: absolute;
    bottom: 0;
}



</style>
    
</head>

<body>

<div id="wrapper">

        <div id="suche"><img src="suche.gif" width="1024" height="239" border="0" alt="suche"></div>
        <div id="listenwrapper">
        <div id="liste">
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text 
            text text text text text text text text text text text text text text text text
            text text text text text text text text text text text text text text text text <br /><br /><br /><br />
            text text text text text text text text text text text text text text text text 
        </div>
        </div>    
</div> 

<div id="warenkorb"><img src="warenkorb.gif" width="1024" height="164" border="0" alt="warenkorb"></div>

</body>
</html>
 
Der Header kann wandern, benötigt also keine fixe Position... Ideal wäre es halt wenn das Content-div sich so anpasst dass die Seite ausgefüllt ist...

Die Seite muss für eine Auflösung von 1024x768 ausgerichtet sein, also bei dieser Auflösung soll man Header, Content und Footer sehen. Bei größerer Auflösung soll der Content-Bereich wachsen.
 
Ich vermute mal das soll ein Frame werden?

Code: 
<!doctype html>
<html>
<head>
<title>Titel</title>
<style type="text/css">
* {
 margin:0;
 padding:0;
}

html , body {
 height: 100%;
 overflow:hidden;
}

#oben {
 height:100px;
 background:#09c;
}

#mitte {
 position:absolute;
 top:100px;
 bottom:100px;
 width:100%;
 overflow:auto;
}   

#unten {
 position:absolute;
 bottom:0;
 width:100%;
 height:100px;
 background:#09c;  
}
</style>
</head>
<body>

<div id="oben"><h1>oben</h1></div>
<div id="mitte">
<div id="test" style="min-height:1000px;"><p>Mitte( Container f&uuml;r weitere Spalten</p></div>
</div>
<div id="unten"><h1>Unten</h1></div> 
</body>
</html>

IE6 oder auch IE7 haben kleine Probleme damit. Das lässt sich aber einfach lösen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben