aiuto con overflow

**oppilifitrof** · 18-05-2012, 10:47

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

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;
}

l'html invece e' questo:

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

**ricman** · 20-05-2012, 12:40

Al div container devi assegnare un'altezza... cioè la distanza fissa (altrimenti non ti comparirebbe la scrollbar) che vuoi che ci sia tra header e footer

**oppilifitrof** · 20-05-2012, 13:33

In effetti ha senso

grazie

Discussione: aiuto con overflow

Strumenti discussione

Ricerca discussione

Visualizza

aiuto con overflow

Permessi di invio