pagina con scroll verticale e iframe di altezza dinamica

[Shores]

Allora, questa è veramente difficilotta!

Immaginate questa situazione: pagina con molti contenuti, che quindi ha bisogno dello scroll verticale; in cima ed in fondo alla viewport ci sono una testata e un piede con dentro una bottoniera che sono fissi (position: fixed in cima ed in fondo (top:0 e bottom:0) rispettivamente.

Tra questi contenuti ce ne è uno che è un iframe, che a sua volta conterrà un'altra pagina (ed eventualmente avrà un suo scroller, se necessario).

Il punto è: esiste uno stile CSS che mi permetta di dire che l'iframe dev'essere di una altezza tale da essere tutto visibile quando scrollato al punto giusto?

Detto in altri termini, esiste un modo per dirgli che dev'essere alto come la parte di viewport che i due elementi fixed sopra e sotto lasciano libera?

Io ci ho riflettuto parecchio e sono giunto alla conclusione che con il puro css non si possa fare, ma ci sia bisogno di javascript, ma se qualcuno dei geniacci che leggono ha delle idee, sono le benvenute!

Qui:

http://www.shoresofnowhere.com/test/iframefluido/

trovate un esempio di quel che intendo, l'ho sfrondato il più possibile per semplificare il problema, perdonate se trovate qualcosa di non perfettamente validato...

A voi la sfida!

[Mich_]

Anzitutto il "difficile" e` un giudizio che puoi lasciare alla fine; probabilmente ti accorgerai che in informatica non ci sono cose "difficili": ci sono cose che si sanno fare ed altre che non si sanno fare.
In qualche caso ci sono cose complesse, ma questo e` un discorso diverso.


Ed arrivo con alcune domande (e forse qualche risposta):

ci sono una testata e un piede con dentro una bottoniera che sono fissi (position: fixed

perche` sono fixed? Non sarebbe meglio due blocchi con posizionamento assoluto? (cosi` la barra di scorrimento non li comprende, e non hai problemi di sovrapposizioni.
Piuttosto devi vedere cosa succede se la finestra del browser e` piu` bassa della somma di header e footer (o comunque lascia poco posto in mezzo)

Tra questi contenuti ce ne è uno che è un iframe,

Perche` usi iframe, che sono strutture obsolete e deprecate (non valide in alcune DTD); potrebbero esserci browser che non li supportano.
Piuttosto vedi se ti conviene usare tecnologia di tipo AJAX (info nel forum JS)

esiste uno stile CSS che mi permetta di dire che l'iframe dev'essere di una altezza tale da essere tutto visibile quando scrollato al punto giusto?

Non capisco bene la domanda.
Cosa deve essere tutto visibile: il blocco che tu chiami iframe dentro la finestra, oppure il contenuto che ci scrolla all'interno?
Vorresti spostare la pagina in modo da posizionare il top di tale blocco in cima alla parte visibile? Si fa in modo semplilce con una semplice ancora (<a name="..." />) ed un link che punta a tale ancora.

esiste un modo per dirgli che dev'essere alto come la parte di viewport che i due elementi fixed sopra e sotto lasciano libera?

Con i posizionamenti assoluti e` possibile definire top e bottom contemporaneamente (chiaramente in tal caso non si puo` definire height).

[Shores]

Uh, che serietà seriosa!

Prima di tutto, so di che cosa parlo: faccio questo mestiere da 15 anni, quindi quando dico difficile è proprio perché SO che il quesito che sto per fare è difficile...

Venendo al punto:

Uso il position fixed proprio PER ottenere che le due parti, testata e piede, siano bloccate sempre alla testa e al piede della viewport: sono due elementi che DEVONO (soprattutto il piede che contiene la bottoniera) essere creati all'interno di altri tag (tipicamente i button di una form devono stare dento la form stessa) e che quindi non sarebbe sensato posizionare absolute, visto che questo implicherebbe poi non poter posizionare in nessuna maniera se non static tutti i tag che li contengono, una limitazione assurda che non ha ragione d'essere, visto che esiste il posizionamento fixed che invece si riferisce sempre alla viewport.

Dopodiché, mi sembra un po' strano dirmi di utilizzare AJAX perché ci sono browser che non supportano gli IFRAME: gli IFRAME sono una tecnologia che esiste da ben prima di Ajax, sono perfettamente supportati da praticamente tutti i browser, e, al contrario di quel che sostieni, sono validi in praticamente tutte le DTD, tranne quelle strict, che peraltro rendono invalidi anche costrutti UTILISSIMI come il target=_blank (a proposito, qualcuno dovrebbe spiegarmi perché dover usare un javascript per aprire ul link in un'altra finestra sia un miglioramento rispetto a target=_blank...); sono i normali FRAME a non esserlo...

Per spiegare meglio ciò che vorrei lo faccio con un esempio: supponi di avere una viewport alta 100px, con una testata fixed alta 10px e un piede fixed alto 10px, io vorrei una regola CSS che facesse si che il mio IFRAME sia sempre alto 100-10-10 px, ovvero 80 px se la viewport è 100px, 180px se la viewport è alta 200px, e così via.

Vorrei essere sicuro, detto in altri termini, che la barra di scorrimento che potrebbe apparire a fianco dell'IFRAME sia sempre interamente visibile SE la pagina principale viene scrollata al punto giusto.

Quanto poi alla tua proposta di dare un posizionamento absolute all'iframe, è proprio quello che NON voglio, visto che voglio che possa scrollare in su e in giù insieme con il resto dei contenuti della pagina...

Insomma, il mio quesito NON è come cambiare l'HTML della pagina esempio, o come cambiarne l'ergonomia modificandone il layout: vorrei solo rendere elastica l'altezza dell'IFRAME come vi ho descritto.

Idee?

[Shores]

up!

Nessuno ha qualche idea?