Header fisso + contenuto scroll

**alino74** · 24-04-2012, 02.25.37

Ciao raga!

Questo il codice CSS:

Codice:

]body, html {
width: 100%;
max-width: 100%;	
height: 100%;
max-height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
font-family: Comics, Arial, Verdana, sans-serif;
}

#header {
float: left;
margin-left: 0;
width: 100%;
overflow: hidden;	/* elimina sroll bars */
}
#contenitore {
float: left;
width: 100%;
height: 100%;
max-height: 100%;
margin-left: 0;
overflow:auto;
}

#contenuto{
float: left;
width: 80%;
margin-left: 0;
}
#right {
float: left;
width: 20%;
}
#footer {
clear: both;
margin-left:0;
width: 100%;
overflow: hidden;	/* elimina sroll bars */
}

Codice HTML:

<div id="header">
</div>
<div id="contenitore">
	<div id="contenuto">
	</div>
        <div id="right">
        </div>
      <div id="footer">
      </div>
</div>

PROBLEMA:
Il contenuto che eccede la finestra browser non viene mostrato completamente e non appare neanche il footer.
In sostanza avrei bisogno di avere header fisso e il resto della pagina (div vari con footer a fondo pagina) scrollabile;

**karl94** · 24-04-2012, 08.14.37

Togli tutte le proprietà overflow, imposta una altezza fissa all'header e imposta la proprietà position su fixed. Dovrai anche regolare di conseguenza i margini dell'elemento body.

**alino74** · 24-04-2012, 10.29.41

vorrei che il footer :
1) fosse posizionato a fondo pagina, se il contenuto principale è minore dell'altezza della finestra;
2) andasse in fondo al contenuto principale (e quindi visibile solo con lo scrolling), se questo supera l'altezza della finestra...

**karl94** · 24-04-2012, 16.50.32

Se cerchi un attimo torvi in rete migliaia di guide che trattano questo specifico problema.

**alino74** · 25-04-2012, 00.56.47

eh! o capito....ma pensavo di essere nel posto giusto!
Se già ho trovato un forum che tratta di qeste cose, xchè devo cercare altrove? Mah....

**alemoppo** · 25-04-2012, 01.06.48

Perché è inutile ripetere le stesse cose millemila volte

. Se ci sono, si fa prima a cercarle.
Se poi hai problemi, siamo qua per questo.
Ciao!

**karl94** · 25-04-2012, 01.08.42

Quello in questione è un problema già trattato migliaia di volte, è inutile reinventare l'acqua calda. Se vuoi il codice già bello che pronto, questo forum non fa per te, se invece vuoi imparare segui il mio consiglio e datti un po' da fare.

Anticipato, ma lascio...

**alino74** · 25-04-2012, 01.33.16

ok, avete ragione! scusate...
Comunque ho cercato altrove e non trovo quello che mi serve.
Stò provando da solo, ma non riesco.
-> header fisso (e qesto è ok);
-> div centrale, se necessario, deve scrollare;
-> footer a fondo pagina (anche se contenuto del div centrale non arriva a fondo pagina...)
Aiuto!! non riesco negli ultimi due punti !

**karl94** · 25-04-2012, 23.40.09

http://lmgtfy.com/?q=stick+the+foote...om+of+the+page
Se poi hai problemi, pubblica tutto in rete e fornisci l'indirizzo così da poterti dare maggiori indicazioni.

**alino74** · 27-04-2012, 18.47.44

Uffa!!!!!!!!

Non ci riesco....
Guardate, testate e datemi una dritta x avere il footer sempre a fondo pagina,
anche con contenuti centrali di dimensioni minori della finestra browser!

layout.css

Codice HTML:

body {
/* full height ! */
height:auto !important; 
height:100%; 			
min-height:100%; 		

margin: 0;
padding: 0;
position: relative;
overflow:auto;
color:white;
background-color: lightgray;
font-family: Comics, Arial, Verdana, sans-serif;
}

#contenitore {
position: relative;
top: 0;
left:0;
right:0;
bottom:0;
padding-top:151px;	/* deve essere posizionato sotto l'header ! */
color: black;
}

#header {
position: fixed;
top:0;
left:0;
height:150px;
width: 100%;
color: white;
background-color: blue;
}

#contenuti{
float: left;
width: 70%;
margin-left: 0;
padding-bottom: 80px;	/* lascia lo spazio x il footer ! */
}

#extra {
float: right;
width: 25%;
margin-bottom: 80px;	/* lascia lo spazio x il footer ! */
}

#footer {
clear: both;
posietion:absolute;
bottom: 0;			/* fissa in fondo alla pagina! */
width:100%;
height: 50px;
background-color: green;
}

prova.hml

Codice HTML:

<html>
<title>miosito.it</title>
<head>
	<link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>

<div id="contenitore">

<div id="header">
	<h1>Header</h1>
	<hr>
</div>	

<div id="contenuti">

	<p> ====== INIZIO ========= <br />
	</p>
	
	<p>
	Header fisso e contenuto centrale scrollabile con footer <strong>SEMPRE!</strong> a fondo pagina.<br />
	<strong>PROBLEMA:</strong><br />
	se contenuto centrale minore della finestra, il footer non si posiiziona a fondo pagina!<br /><br />
	<strong>AIUTO!!!!!</strong>
	
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	<p>
	contenuto principale<br />
	</p>
	

	
	<p> ====== FINE ========= <br />
	</p>
</div>

<div id="extra">
	<p>extra!</p>
</div>		

<div id="footer">
	<p>Questo è il footer</p>
</div>	

</div>

</body>
</html>

Aiuto!!!!!!!!!!!!!!

**alino74** · 27-04-2012, 19.27.52

OK CI SONO RIUSCITO!!!!!!!!!!!!!!!!!!!!!!!!!1

LAYOUT.CSS

Codice HTML:

body, html {
height:100%;
margin:0;
background-color: lighrgray;
font-family: Comics, Arial, Verdana, sans-serif;
}

#contenitore{
min-height:100%;
}

#header{
position:fixed;
height:100px;
width:100%;
color:white;
background:blue;
}

#contenuti {
float: left;
width: 80%;
padding-top: 101px;			/* sotto l'header */
padding-bottom: 100px;		/* lascia spazio per il footer */
}

#extra{
float: right;
width: 20%;
padding-top: 101px;
padding-bottom: 100px;		/* come sopra... */
}

#footer{ 
clear: both;
margin-top:-50px;			
height: 50px;
width:100%;
background:green;
}

INDEX.HTML

Codice HTML:

<html>
<title>miosito.it</title>
<head>
	<link rel="stylesheet" type="text/css" href="layout.css">
</head>

<body>

<div id="contenitore">

<div id="header">
	<h1>Header</h1>
	<hr>
</div>	

<div id="contenuti">

	<p> ====== INIZIO ========= <br />
	</p>
	
	<p>
	Header fisso e contenuto centrale scrollabile con footer <strong>SEMPRE!</strong> a fondo pagina.<br />
	</p>	

	
	<p> ====== FINE ========= <br />
	</p>
</div>

<div id="extra">
extra!
</div>

</div>
	

<div id="footer">
	<p>Questo è il footer</p>
</div>	


</body>
</html>

Testate e suggerite miglioramenti!!!
ciao ciao!

Discussione: Header fisso + contenuto scroll

LinkBack

Strumenti discussione

Display

Header fisso + contenuto scroll

Regole di scrittura