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
vai a fondo paginaqui invece funziona con Opera

Aggiornato domenica 22 agosto 2004
soprattutto per provare che l'ancora nella parte fissa che porta a un punto in quella che scrolla, qui a differenza che in una soluzione intermedia, funziona anche con opera

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:"trebuchet ms", 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%;
}

.testone{border:1px solid #ff6600;
background:#f4fde8;
margin:4%;
color:#404040;
margin-bottom:4em;
}
.testo {padding:1em;
}
h1 {font-size:1em;
margin:4%;
background:red;
color:white;
padding:1em;
border: 1px solid white;
margin-top:1em
}


#Testa {background:maroon}

pre {padding:.4em;
background:#e8fbce;
color:#d84bad;
border:1px solid #ff6600;
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;
text-align:center;
}
#fascia a {
color:white;
border:2px solid white;
padding:.1em;
background:#999999;
position:relative;
}
#fascia a:hover{background:white;
color:red;
top:-.4em;
padding-left:2em;
padding-right:2em;
letter-spacing:.6em;
border:2px solid red
}


.clear {clear:both}

.testo:first-letter {font-size:1.4em;
font-weight:bold;
color:red}

.testo a {width:90%;
background:red;
color:white;
font-weight:bold;
text-align:center;
border:1px solid silver;
padding-top:1em;
padding-bottom:1em;
display:block;
margin:2em;

}
.testo a:hover {
color:red;
background:white;
border:1px solid red;
margin:1em;
padding-bottom:3em;
width:98%;
position:relative;
top:-2em;
letter-spacing:.4em;
font-weight:bold;
text-decoration:overline
}
em {color:red;
letter-spacing:.4em;
font-style:normal;
font-weight:bold
}

a {color:red;
background:white;
border:1px solid gray;
padding-left:.4em;
padding-right:.4em
}

a:hover {background:silver;
color:white;
border:1px solid white;
}

a:hover span {display:none}
		
a cite {display:none}

a:hover cite {display:inline;
font-style:normal;
font-size:.8em;
font-weight:normal;
}
h3 {padding:1em;
color:white;
font-size:.8em;
background:gray
}

Aggiornato domenica 22 agosto 2004
ora il css non ha differenze con quello della pagina
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 ....

Infatti a oggi domenica 22 agosto 2004 mancherà ancora molto, è vero che ho molto materiale pronto ma lo è altrettanto che ho altre cose da fare
e ora mi accorgo che la versione 5 del browser monopolio è tutta scombussollata e in più con le ancore impazzisce completamente mentre non ricordo queste bizzarrie nel nuovo materiale e in ogni caso la metto online così che proprio di accudire quello ora non mi va, la versione 4 invece va meglio!!! compare una barra in più ma il resto va!!!

torna su

Gomma Layout