Erneutes Sticky Footer Problem

skinner13 · 04.10.2010

Hallo liebe Community,

ich habe ein erneutes Problem mit dem Sticky Footer der beschrieben wird.

Mein Quelltext ist dieser:

Code:

<body>
<div id="wrap_outer">
    <div id="wrap_inner">
        <div id="header"></div>
        <div id="main" class="clearfix">test_text</div>
    </div>
</div>

<div id="footer"></div>
</body>

Code:

html, body, #wrap_outer{    
    height:100%;
    width:100%;
    margin:0; 
    padding:0;}
            
body > #wrap_outer{
    height:auto;
    min-height:100%;}

#wrap_inner{
    height:100%;
    min-height:100%;
    width: 1009px;
    margin:0 auto;    
    background-image:url(images/bg_inner_wrap.png);
    background-repeat:repeat-y;}

#main{
    overflow:auto;
    padding-bottom:100px;}
    
#footer{ 
    height: 100px;
    position:relative;
    margin-top:-100px;
    clear:both;
    background-color:#F00;}
    
.clearfix{
    display:inline-block;}
    
.clearfix:after{
    content:".";
    display:block;
    height: 0;
    clear:both;
    visibility:hidden;}

Mein Problem liegt nun darin, dass mein wrap_outer nicht die 100% Höhe annimmt (siehe Bild)

und wenn ich im wrap_outer, height: auto gegen height: 100 % tausche geht die Höhe auf 100 % jedoch mein sticky footer wieder nicht.

Kann mir da einer weiterhelfen.

Vielen Dank schon einmal im vorraus.

Manfred62 · 04.10.2010

AW: Erneutes Sticky Footer Problem

Hallo

Dort sind aber keine 2 wraps beschrieben?? Wozu brauchst du den 2.wrap?
Bau sie doch mal genau nach. BTW: schau dir mal die englische Variante an.
Ist mir eh etwas suspekt, dass unter dem gleichen Namen unterschiedliche Lösungen angeboten werden.

Ich hab eine Lösung von hier verwendet:
CSS-LAB.com - Ray's CSS Demos

Gruß Manfred