pagina con testata e piè fissi

**rinosan_76bis** · 07-10-2010, 16:40

Ciao a tutti... io ho un HTML più o meno così

codice:

<html>
<head>...</head>
<body>
 <div id="testata">...</div>
 <div id="contenuto">con un bel po di contenuto</div>
 <div id="pie">...</div>
</body>
</html>

E' possibile tramite CSS o al massimo JS fare si che la Testata ed il piè di pagina siano fissi... e che il contenuto sia variabile come altezza e con scorrimento se serve?
Sto realizzando un software, quindi mi piacerebbe che il menu fosse sempre visibile, ed anche il piè perchè ha delle funzioni, mentre il contenuto se serve può scrollare. Il problema è che non avendo la possibilità di bloccare le dimensioni delle finestre (non so su che monitor verrà usato ed ora con sti WIDE-SCREEN le dimensioni sono ancora più complesse da standardizzare)
Mi sapete indicare qualcosa?
Grazie
Rino

**Mich_** · 07-10-2010, 17:19

Per la testata e` banale.
Per il footer, puoi vedere questa pagina della guida CSS di HTML.it: Il problema del footer, oppure vedi le raccolte di layout (alcune citate tra i "link utili").

**rinosan_76bis** · 07-10-2010, 23:22

Guardando il tuo post ho corretto così il codice

codice:

<html>
<head>
<style>
html,body{margin:0; padding: 0;height: 100%}
div#testata{position:fixed; width: 100%; margin: 0; padding: 0;background:#000;color:#fff;}
div#container{position: relative; height:100%}
body>div#container{height: auto; min-height: 100%}
div#content{padding: 0; color:#000;}
div#footer{position:fixed;bottom: 0;width: 100%;background:#000;color:#fff;} 
div#contenuto{padding:40px 0 0 0;background:#ccc}
</style>
</head>
<body>
<div id="container">
 <div id="testata">Testata</div>
 <div id="content">
  <div id="contenuto">  con un bel po di contenuto</div>
 </div>
 <div id="footer">Pi&egrave; di pagina</div>
</div>
</body>
</html>

Così modificata su FF e Chrome funziona... ma naturalmente su IE il footer non si blocca a fondo schermo ma va oltre e scrolla.
Sapete dirmi cosa IE non legge?

**Mich_** · 08-10-2010, 08:52

Quale versione di IE?
Quale DTD usi?

In linea di massima IE (dal 6 in poi) si comporta quasi bene se usi una DTD Strict (ad esempio XHTML 1.0 Strict).
Se invece ti basta la compatibilita` con IE7 e IE8, puoi anche usare HTML5.

Se non puoi cambiare DTD o se ancora non funziona, puoi usare i commenti condizionali (vedi tra i "link utili" se non sai cosa sono)

**rinosan_76bis** · 08-10-2010, 10:59

In questo momento non ho messo DTD, ho usato proprio il codice che ho postato qua... Ho provato su IE7
So cosa sono i commenti condizionali, ma non so cosa ci devo scrivere per farlo funzionare... ora mi informo su HTML5 ma anche li non saprei come fare.

**Mich_** · 08-10-2010, 11:24

La DTD e` la prima cosa che devi decidere. Se poi la cambi, cambia il risultato che vedi (sporattutto nei browser IE).
Se il tuo problema e` che si veda bene dappertutto con minimo sforzo da parte tua, la scelta piu` conveniente al giorno d'oggi e` XHTML 1.0 Strict.

HTML5 ancora non e` ufficiale, e alcuni browser interpretano a modo loro (letto proprio oggi in una news). Puo` essere utile in prospettiva, ma puo` richiedere lavoro di adattamento per vari browser che non lo capiscono o lo capiscono in modo incompleto.

Comunque con DTD transitional o senza DTD IE non capisce min-height e max-height (e -width), mentre width (e height) si comporta come min-width (min-height).

**rinosan_76bis** · 08-10-2010, 15:20

Ora ho capito... e sinceramente non pensavo potesse accadere che un browser cambiasse l'uso dei CSS al cambiare della DTD
Cambiando così il codice su IE7 funziona

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" lang="en">
<head>
<style>
html,body{margin:0; padding: 0;height: 100%}
div#testata{position:fixed; width: 100%; margin: 0; padding: 0;background:#000;color:#fff;}
div#container{position: relative; height:100%}
body>div#container{height: auto; min-height: 100%}
div#content{padding: 0; color:#000;}
div#footer{position:fixed;bottom: 0;width: 100%;background:#000;color:#fff;} 
div#contenuto{padding:40px 0 0 0;background:#ccc}
</style>
</head>
<body>
<div id="container">
 <div id="testata">Testata</div>
 <div id="content">
  <div id="contenuto"> 
   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

   con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto
con un bel po di contenuto

  </div>
 </div>
 <div id="footer">Pi&egrave; di pagina</div>
</div>
</body>
</html>

Discussione: pagina con testata e piè fissi

Strumenti discussione

Ricerca discussione

Visualizza

pagina con testata e piè fissi

Permessi di invio