main a scorrimento con footer fisso

**lupo60** · 24-12-2011, 19:59

Ciao a tutti,
vorrei ho una pagina con un layout abbastanza classico con header, colonna sinistra, main centrale e footer.
Il tutto va bene per le mie esigenze, il footer è fisso in fondo alla pagina ed il main centrale scorre se il contenuto è troppo ampio.
Ora vorrei ottenere anche il main avesse la possibilità di avere un proprio footer fisso con la parte di contenuto che scorre se necessario.
Ragazzi, ci ho provato in tutti i modi ma non ci riesco.
Potete darmi una mano ?
Allego il codice.
Grazie
Flavio

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> stu nicholls | CSS PLaY | cross browser fixed header/footer/left column layout scrolling middle area </title>
<style type="text/css">
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#fff;
font-size:76%;
font-family:georgia, palatino linotype, times new roman, serif;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */
}

body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}

#content {overflow:auto; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}

* html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:auto; position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:200px solid #fff;}

#head {position:absolute;
margin:0;
top:0;
left:0;
display:block;
width:100%;
height:100px;
background:url(clouds.jpg) #000;
background-position:0 0;
background-repeat:no-repeat;
font-size:4em;
z-index:5;
overflow:hidden;
color:#fff;
}
#foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}

#left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(chimney.jpg) rgb(76,76,76); font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}

* html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}

.header-title {
text-align: center;
}

#tabContent {height: 100%; width:100%; overflow:auto; }
#footContent {height: 85px; width:100%; border: 2px solid blue; position:absolute; }

</style>
</head>

<body>
<div id="head"><span class="header-title">Pollution</span></div>
<div id="foot">©2004 Stuart A Nicholls</div>

<div id="left">
</div>

<div id="content">
<h2>Pollution ~ the facts.</h2>
<p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
<div id="tabContent">

NN7 displays correctly but the absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>

The menus on the left are produced using definition lists which are easier to work with than unordered lists and have the additional benefit that you can give a 'definition' of each link for text-only browsers.</p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse
molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</p>

© 2004-2008 Stuart Nicholls</p>
</div>
<div id="footContent">
</div>

</div>
</body>
</html>

**figlio89** · 27-12-2011, 04:47

Se ho capito bene quello che vuoi fare è mettere un footer attaccato a terra:

Prova a modificarlo così:

#foot {position:fixed; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}

**lupo60** · 27-12-2011, 18:45

ciao,

quello che vorrei ottenere è che la div "footContent" si posizionasse, come footer della div "content", in modo fisso in fondo alla pagina (ma sopra la div "foot"), sempre visibile, e che nel caso il contenuto della div "content" andasse in overflow, fosse solo la div "content" a scorrere, lasciando le div "foot" e "footContent" fisse.

Spero di essermi spiegato bene.

Ciao e grazie per l'aiuto.

Flavio

PS
ho provato a specificare come stile della div "footContent" ciò che segue ; qualcosa è migliorato, ma se provo ad ingrandire il carattere il contenito va sotto il footer e quindi non va bene
#footContent {height: 85px; width:100%; border: 2px solid blue; position:absolute; bottom:0;}

**figlio89** · 27-12-2011, 20:55

Settando la footContent in questo modo:

#footContent {position: fixed; bottom:0px;height: 85px; width:100%; border: 2px solid blue; }

ottieni che rimane fissa mentre il contenuto dietro scorre, però c'è bisogno di altre piccole modifiche:

1) Se setti il footContent al 100% di width andrà anche sopra la barra per scorrere, cerca di trovare la giusta percentuale;
2) Se non necessario io togliere l'overflow di #tabContent {height: 100%; width:100%; overflow:hidden; } perché altrimenti ne appaiono 2, quello di tabContent e quello di Content.
3) Una porzione di contenuto risulterà sotto al footContent però si può ovviare mettendo un altro elemento bianco di altezza pari al footContent.

Purtroppo sarò un po' impegnato quindi ti ho dato qualche linea / traccia da seguire.

Spero sia di aiuto

P.S. L'ho controllato solo su Google Chrome... sorry... cerca di controllare la compatibilità anche con gli altri Browser

**lupo60** · 28-12-2011, 18:30

Alla fine ci sono riuscito, anche se sono impazzito con quello che tu avevi previsto al punto 3), il che mi lascia intendere che conosci molto bene l'argomento ;-)).
Il fatto è che non ho capito fino in fondo come mai funziona !!
Ho fatto questo :
- il div tabContent è diventato contenitore di due div : tabContent_1 e bianco
- il div foot Content è rimasto allo stesso livello di tabContent
- lo stile di tabContent é :
{height: 100%; width:100%; overflow:auto; }
- lo stile di tabContent_1 è :
{position: relative; top: 0px; }
- lo stile di footContent è :
{height: 85px; width:100%; border: 2px solid blue; position:absolute; bottom:0px;}
- lo stile di bianco è :
{height: 150px; width:100%; visibility: hidden; position:relative; bottom:0px; display: block;}
quello che io ho (penso di avere) capito è :
- content ha altezza 100% - 100px di head e -50px di foot, quindi 100% - 150 px
- tabContent è figlio di content ed avendo height 100% ha la stessa altezza di content e si
prende tutto lo spazio disponibile in altezza ; quindi footContent non viene visualizzato se
tabContent occupa tutta l'altezza disponibile o va in overflow. Il meccanismo per poter
visualizzare footContent è quello di riservargli uno spazio senza contenuto in fondo alla parte
visibile di tabContent. Quindi :
- posiziono tabContent_1 e bianco all'interno di tabContent, questi occupano tutta la
height di tabContent ; tabContent_1 si posiziona in alto (rispetto a tabContent) con top
0px e altezza variabile e bianco si posiziona in basso (rispetto a tabContent) con bottom
0px e altezza fissa 150 px in modo che riservi lo spazio per footContent
quello che non torna è la height di bianco, 150 px, che è la somma di foot (50px) + footContent (85 px) + 15 px di gap ?? ; mi sarei aspettato che 85 px fosse sufficiente ... boh
Se riesci a chiarirmi il funzionamento mi fai una cortesia enorme.
Attacco in fondo la pagina definitiva
Ciao e grazie
Flavio

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title> stu nicholls | CSS PLaY | cross browser fixed header/footer/left column layout scrolling middle area </title>
        <style type="text/css">
            html {
                height:100%;
                max-height:100%;
                padding:0;
                margin:0;
                border:0;
                background:#fff;
                font-size:76%;
                font-family:georgia, palatino linotype, times new roman, serif;
                /* hide overflow:hidden from IE5/Mac */
                /* \*/
                overflow: hidden;
                /* */
            }

            body {height:100%; max-height:100%; overflow:hidden; padding:0; margin:0; border:0;}
            #content {overflow:hidden; position:absolute; z-index:3; top:100px; bottom:50px; left:200px; right:0; background:#eee;}
            * html #content {top:0; left:0; right:0; bottom:0; height:100%; max-height:100%; width:100%; overflow:hidden; position:absolute; z-index:3; border-top:100px solid #fff; border-bottom:50px solid #fff; border-left:200px solid #fff;}
            #head {position:absolute;
                   margin:0;
                   top:0;
                   left:0;
                   display:block;
                   width:100%;
                   height:100px;
                   background:url(clouds.jpg) #000;
                   background-position:0 0;
                   background-repeat:no-repeat;
                   font-size:4em;
                   z-index:5;
                   overflow:hidden;
                   color:#fff;
            }
            #foot {position:absolute; margin:0; bottom:0; left:0; display:block; width:100%; height:50px; font-size:1em; z-index:5; overflow:hidden; background:rgb(76,76,76); color:#fff;}
            #left {position:absolute; left:0; top:100px; bottom:50px; width:200px; background:url(chimney.jpg) rgb(76,76,76); font-size:1.2em; z-index:4; overflow:auto; background-repeat:no-repeat;}
            * html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}
            .header-title {
                text-align: center;
            }
            #tabContent {height: 100%; width:100%; overflow:auto; }
            #tabContent_1 {position: relative; top: 0px; }
            #footContent {height: 85px; width:100%; border: 2px solid blue; position:absolute; bottom:0px;}
            #bianco {height: 150px; width:100%; visibility: hidden; position:relative; bottom:0px; display: block;}
        </style>
    </head>
    <body>
        <div id="head"><span class="header-title"> Pollution</span></div>
        <div id="foot"> �2004 Stuart A Nicholls</div>

        <div id="left">
        </div>

        <div id="content">
            <h2>Pollution ~ the facts.</h2>
            <p class="bold">This one works in IE5.01, IE5.5, IE6, Opera 7.23, Mozilla and Firefox</p>
            <div id="tabContent">
                <div id="tabContent_1">
                    

NN7 displays correctly but the absolutely positioned div in the content area stays 'fixed' as the content scrolls.</p>
                    

The menus on the left are produced using definition lists which are easier to work with than unordered lists and have the additional benefit that you can give a 'definition' of each link for text-only browsers.</p>
                    


                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    </p>
                    



                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
                        ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                        ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
                        in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
                        facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
                        luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                    </p>

                    


                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    </p>

                    


                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
                        ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                        ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
                        in vulputate velit esse
                        molestie consequat, vel illum dolore eu feugiat nulla
                        facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
                        luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                    </p>
                    



                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    </p>
                    


                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
                        ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                        ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
                        in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
                        facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
                        luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                    </p>
                    


                        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
                        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
                        dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore
                        eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
                        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
                        facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
                        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
                    </p>
                    


                        Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
                        euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
                        ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
                        ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
                        in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
                        facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
                        luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
                    </p>
                    

� 2004-2008 Stuart Nicholls</p>
                </div>
                <div id="bianco">
                </div>
            </div>
            <div id="footContent">
            </div>
            

        </div>
    </body>
</html>

Discussione: main a scorrimento con footer fisso

Strumenti discussione

Ricerca discussione

Visualizza

main a scorrimento con footer fisso

Permessi di invio