Rendere i contenuti HTML espandersi per riempire la finestra

Question

Ho una pagina HTML divisa verticalmente in

• Intestazione
• corpo
• Piè di pagina

Il corpo a sua volta è divisa orizzontalmente in

• Una grande DIV sulla sinistra circondato da barre di scorrimento, la visualizzazione di una porzione di un diagramma
• Un modulo a destra

L'intestazione e piè di pagina sono ad altezza fissa. Il corpo dovrebbe espandersi verticalmente per riempire la porzione della finestra non occupata dal intestazione e piè.

larghezza fissa Analogamente il modulo è e il riquadro di scorrimento dovrebbe estendersi orizzontalmente per riempire la larghezza della finestra.

Il diagramma è molto grandi (fino a 10x10 screenfuls) e quindi non in grado di visualizzare tutto. Invece voglio visualizzare il più possibile (usando l'intera finestra) in modo che l'utente deve scorrere il meno possibile.

Anche non posso usare JavaScript, perché alcuni utenti sono necessariamente paranoico e necessario disattivarlo.

Alcune opzioni ho considerato:

• A tavola con la larghezza della cella riquadro di scorrimento e l'altezza impostata al 100% e tutti gli altri a 1%
  non funziona. La tabella (e quindi pagina) espande per contenere l'intero diagramma, anche con posizionamento assoluto sulla DIV riquadro di scorrimento.
• Il posizionamento assoluto per compensare il riquadro dal fondo della pagina per l'altezza del piè di pagina
  Opere ma imprecisa: l'altezza del piè di pagina dipende dalla dimensione del carattere attuale e se il testo è avvolto. Questo significa che devo lasciare un ampio margine per assicurarsi che non si sovrappongano.
• Inserisci il diagramma in un IFRAME
  La soluzione migliore che ho trovato con gli script disabilitati, ma limita cosa posso fare negli script quando attivato.

Ho notato che Google Maps utilizza una zona di dimensioni fisse per la mappa, quando gli script sono disabilitati. Se Google ha rinunciato a questo problema vuol dire che non è fattibile?

Answer 1

Utilizzando l'altezza:. Attributo CSS 100% dovrebbe farlo funzionare

Vedere se Dave Woods 100% layout altezza mediante CSS funziona per voi .

Answer 2

E 'un aspetto poco conosciuto della proprietà CSS position: absolute; che vi darà il layout che si sta cercando. È assolutamente possibile posizionare un elemento nelle 4 direzioni, in alto, a destra, in basso a sinistra e. Ciò significa che una scatola può essere fluido come il browser e rimanere sempre alla stessa distanza dai bordi del suo contenitore che si specifica.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

Per un esempio controllare http://www.sanchothefat.com/dev/ layout / cssframes.html e quindi visualizzare sorgente e separare il CSS per vedere come è fatto in un esempio più complesso.

Se si prende questo approccio è necessario posizionare assolutamente tutte le principali <div>s contenitore. Utilizzare EMS se font-size è una preoccupazione.

PS. C'è un Gotcha in che IE6 scombina (shock!), Tuttavia l'esempio che ho fornito ha un fallback IE6. Solo un altezza fissa andrà bene comunque.