In questa zona metti quello che vuoi rimanga quasi fisso, quasi, perché se il contenuto supera l'altezza del box, il box mostra uno scroll, così i contenuti rimangono accessibili anche coi browser che leggono il position:fixed che altrimenti li perderebbero

Sembra un frame, ma non lo è, è solo un div con altezza fissata per stare dentro la pagina e overflow:auto, naturalmente il tutto crossbrowser, nel senso che va coi browser che ho provato :)

Questa è la zona che scrolla, ha l'altezza fissata al 100%, con overflow:auto compare lo scroll del div se il suo contenuto supera i suoi limiti, sembra quello della pagina ma è quello del div, normalmente comparirebbe pure lo scroll della pagina, ma l'ho tolto dando pure al body overflow:auto e siccome tutto il contenuto rimane dentro la finestra allora si leva di mezzo.

In realtà sto mettendo un po' di testo per far comparire lo scroll ma ho non nulla da scrivere, anzi mi scoccia un po' scrivere a casaccio, va be', spiego il css allora. Anche se potrei mettere un po' di br, mettiamone qualcuno, insomma se non scrolla a che serve. Idea metto la gif del layout così faccio prima a importare i colori: il layout

Mettiamo pure il css allora, solo che lo dovrei commentare e non è che mi vada molto anche perché devo fare la versione con un testata fissa, sempre sfruttando questo metodo. Il css:
* {margin:0;padding:0}

body {overflow:auto;
font-size:100%;
font-family:sans-serif;
height:100%;
background:gray;
}
#tutto {width:100%;
height:100%;
background:gray;
position:relative
}
#fisso {background:gray;
width:28%;
height:100%;
float:left;
position:fixed;
overflow:auto;

}
#scrolla {height:100%;
background:#c6d2cb;
overflow:auto;
float:right;
width:68%
}
.testo {font-size:1.4em;
color:#404040;
margin:4%;
padding:1%;
background:#f4fde8;
border:1px solid #ff6600
}
h1 {font-size:1em;
margin:4%;
background:red;
color:white;
padding:1em;
border: 1px solid silver;
margin-top:1em
}

#scrolla h1 {border: 1px solid white}

#Testa {background:maroon}

pre {padding:.4em;
background:#e8fbce;
color:#d84bad;
border:1px solid #ff6600;
font-size:.8em;
position:relative;
left:-3%;
margin-top:2em;
font-weight:bold
}
#fascia {background:red;

bottom:2%;
border-top:2px solid white;
border-bottom:2px solid white;
width:100%;
color:white;
text-align:center;
position:fixed !important;
position:absolute;
font-weight:bold
}
.clear {clear:both}

Nel css ci sono alcune cose superflue, come il clear che poi non ho più usato e cose in meno, come il padding del box che scorre, altrimenti con quella fascia del cavolo non si arrivava a vedere il fondo o come i link che dovrei sistemare ma che non mi va proprio e lascio così. anzi ora lo metto nella fascia, vediamo come ci sta. Non ci sta male ma lo devo modificare.
Ora mi tocca aggiungere una testata psudo fissa.
Scusate lo pseudo span, mi serve per non perdere queste prove. Gomma Layout dopo che l'ho aggiunto alla fascia pseudo-fissa lo potrei togliere ma dato che ho formattato per benino i link lo lascio.
Importante!!! il css a video ha una differenza essenziale con quello effettivo, a un certo punto mi sono accorto che Mozilla non ne metteva una di scroll ma ben 3!!! Così ho dovuto un po' vedere cosa era successo e togli questo e togli quello poi l'ho visto, avevo dato un padding-bottom che aumentava così l'altezza del div con conseguenze disastrose, quindi niente padding in questo div e che ci metto? Racchiudo tutto dentro un altro div e lo do a questo un margin, con ulteriore modifica del css a video.

Basta questo è andato, non tocco più niente. Metto un link qui alla futura pagina con css Fixed con Testata ma ad oggi martedì 27 Aprile 2004, quasi mercoledì, manca ancora qualche ora prima che la prepari, o qualche giorno, o qualche ....

Gomma Layout