Ciao a tutti,
mi trovo in ambasce con una questione: ho una pagina, con header e footer fissi. Vorrei mettere nel mezzo un div che si incastri e abbia una sua personale scrollbar per visionare il contenuto che eccede lo spazio che ha a disposizione.
il css e' questo
l'html invece e' questo:codice:body{ background-color:#3f3f3f; margin:0; padding:0; border:0; width:100%; height:100%; } div#header{ clear:both; float:left; width:100%; text-align:center; height:155px; background: url('../img/logo.png'); background-repeat:no-repeat; background-position:center; } div#menu{ border-bottom:3px solid #fb9402; clear:both; float:left; text-align:center; width:100%; } div#menucontainer{ display:inline-block; } #menucontainer ul{ clear:left; float:middle; width:100%; list-style:none; margin:10px 0 0 0; padding:0; } #menucontainer ul li{ display:inline; list-style:none; margin:0; padding:0; } #menucontainer ul li a{ display:block; float:left; margin:0 0 0 2px; padding:3px 10px; text-align:center; text-decoration:none; position:relative; left:15px; line-height:1.3em; background:#2f2f2f; color:#ffffff; } #menucontainer ul li a:hover{ background:#fb9402; color:#3f3f3f; } #menucontainer ul li a.active, #menucontainer ul li a.active:hover{ color:#3f3f3f; background:#fb9402; font-weight:bold; } div#footer{ clear:both; padding-top:3px; float:left; border-top:3px solid #fb9402; text-align:center; width:100%; position:fixed; height:20px; bottom:0px; } p#footer{ color:#ffffff; padding: 5px; text-align:center; } div#container{ width:100%; float:left; clear:both; overflow-x:hidden; overflow-y:scroll; }
codice:<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/stile.css"> </head> <body> <div id="header"> </div> <div id="menu"> <div id="menucontainer"> <ul> [*]home[*]link[/list] </div> </div> <div id="container"> ljfjf </p> </div> <div id="push"></div> <div id="footer"> pippo </div> </html>
Il problema e' che:
1) la scrollbar viene a tutta altezza nella pagina
2) il testo in eccesso (se riempio la pagina con caratteri a caso) invade il footer
Qualcuno sa aiutarmi a risolvere?
Grazie

Rispondi quotando