Problema con Sticky Footer

**Athair90** · 04-10-2013, 22:44

Salve a tutti!
Ho seguito questo vostro tutorial riuscendo a fissare il footer come descritto. Tuttavia sorge un piccolo problema: ho la necessità di espandere le tre colonne fino al margine superiore del footer, ma "height:100%" sembra non funzionare: come potete notare lo sfondo dei blocchi si adatta solamente al testo.
Qualcuno sa perché e come potrei risolvere? Grazie mille per la disponibilità

Per chiarezza posto soltanto la struttura di base differenziando i blocchi con colori diversi!

Senza-titolo-1.jpg

codice HTML:

<body>
    <div id="container">
      <div id="header">HEADER</div>
      <div id="sidebar1">SINISTRA</div>
      <div id="wrapper">CENTRO</div>
      <div id="sidebar2">DESTRA</div>
      <div id="push"></div>
    </div>
    <div id="footer">FOOTER</div>
</body>

codice HTML:

html, body {
    height: 100%;
    margin: 0px;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -50px; 
}
#footer, #push {
    height: 50px; 
    clear: both;
}
#footer {
    background-color: #FAA53A;
    height: 50px;
    overflow: hidden;
    width: 100%;
    border-top: 10px solid #F58529;}
#header{
    background-color: #FAA53A;
    border-bottom: 10px solid #F58529;
    height: 100px;
    width: 100%;}


#sidebar1 {
    float: left;
    width: 20%;
    background-color: #93A5C4;
    background-color:#3CF;
    height: 100%;
}
#wrapper {
    width: 60%;
    float: left;
    background-color:#CF0;
    height: 100%;
}
#sidebar2 {
    float: left;
    width: 20%;
    background-color: #93A5C4;
    height: 100%;
}

**Nobody33** · 05-10-2013, 03:48

QUI trovi la soluzione.

**Athair90** · 05-10-2013, 05:12

Originariamente inviata da Nobody33

QUI trovi la soluzione.

Ti ringrazio per la risposta! Forse sbaglierò io ma il problema persiste :/
Seguendo la guida, ad "allungarsi" è solo il container principale settato su "relative", ma le tre colonne in ogni caso rimangono sempre uguali all'immagine del primo post.

**Athair90** · 05-10-2013, 05:14

più in generale trovo sempre problemi quando si tratta di far convivere height:100% e l'attributo position!

**Nobody33** · 05-10-2013, 05:40

Ma ti sei guardato anche questa immagine (fa sempre parte del link mandatoti nel post precedente)?

Li dentro poi ci puoi mettere gli altri contenitori.

**Athair90** · 05-10-2013, 06:24

si! ho usato proprio quella aggiungendo i miei contenuti

codice HTML:

<div id="container">        
       <div id="content"> <!--Your content goes here-->
            <div id="sinistra">SINISTRA</div>
            <div id="centro">CENTRO</div>
            <div id="destra">DESTRA</div>
        </div>
        <div id="footer">
            Footer here
        </div>        
    </div>

codice HTML:

        * {            margin: 0;
            padding: 0;
            }
        
        body, html {
            height: 100%; 
            }
        
        #container {
            background: red; /* styling only */
            margin: 0 auto;
            position: relative;
            height: auto !important;
            min-height: 100%;
            height: 100%; width: 100%;
            }
        
        #content {
            padding-bottom: 100px;
            height:100%;
            background: blue;
            }
        
        #footer {
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
            width: 100%; height: 50px;
            
            background-color: #FAA53A;
                border-top: 10px solid #F58529;
            }
        #header {
            background-color: #FAA53A;
            border-bottom: 10px solid #F58529;
            height: 100px; width: 100%;
            }
            
        #sinistra {
            float: left;
            width: 20%;
            background-color:#3CF;
            height: 100%;
            }
        #centro {
            width: 60%;
            float: left;
            background-color:#CF0;
            height: 100%;
        }
        #destra {
            float: left;
            width: 20%;
            background-color: #93A5C4;
            height: 100%;
        }

Come puoi vedere è proprio il content (un blu) che non si allunga, di conseguenza neanche le colonne...
Senza-titolo-1.jpg

Anche eliminando il div "content" e dando alle tre colonne "padding-bottom: 100px" il risultato non cambia molto!
Senza-titolo-3.jpg

**Nobody33** · 05-10-2013, 15:19

Strano....incollando il tuo codice in un file, ottengo proprio ciò che vuoi te... anche troppo :-)
Che browser usi?
Vedi qui:
img.jpg

In ogni caso, prova ad aggiungere ai 3 div display:inline-block;

**Athair90** · 05-10-2013, 17:10

Intanto grazie per aver provato anche il codice

lo fa con TUTTI i browser! e display non mi aiuta :/
Inoltre nel tuo screen appare uno scroll che immagino copra il footer: in realtà non dovrebbe esserci dato che non ci sono contenuti in verticale! O.o

Edit: tutti i browser intendo i più diffusi... I, chrome, mozzilla, opera... fino ai visualizzatori dei vari IDE..

Allego la pagina html (con estensione .txt).

**Nobody33** · 06-10-2013, 20:29

codice HTML:

<!doctype html>
<html> 
 <head> 
 <style>
  html, body,#content{
 height: 100%; 
overflow:hidden;
} 
 #sx, #dx, #centro { 
height: 90%; 
}
#dx{float:right;}
#sx{float:left;}
  #content { width: 100%; }
  #sx, #centro, #dx { display:inline-block; }
  #sx, #centro, #dx { width: 33%; 
border: 1px solid red; }
  #footer {position:relative; 
height: 10%;  
    width: 100%;
background:green;
}   </style>  
</head> 
 <body> 
   <div id="content"> 
       <div id="sx">Sinistra</div>
        <div id="centro">centro</div> 
       <div id="dx">destra</div>
     <div id="footer"></div>
    </div>
  </body>
</html>

Sotto IE8 probabilmente non funziona.

**Athair90** · 07-10-2013, 20:10

grazie mille! potrebbe essere una bona soluzione

Discussione: Problema con Sticky Footer

Strumenti discussione

Ricerca discussione

Visualizza

Problema con Sticky Footer

Permessi di invio