CSS Div allunga l’altezza della pagina del 100%

Ho una barra di navigazione sul lato sinistro della mia pagina e voglio che si estenda al 100% dell’altezza della pagina. Non solo l’altezza della finestra, ma includendo le aree nascoste finché non si scorre. Non voglio usare javascript per realizzare questo.

Può essere fatto in HTML / CSS?

Ecco la soluzione che alla fine mi è venuta in mente quando uso un div come contenitore per uno sfondo dinamico.

  • Rimuovi lo z-index per usi non in background.
  • Rimuovi a left oa right per una colonna a piena altezza.
  • Rimuovi la parte top o bottom per una riga a larghezza intera.

EDIT 1: CSS di seguito è stato modificato perché non è stato mostrato correttamente in FF e Chrome. position:relative spostata position:relative a essere sul codice HTML e impostare il corpo in height:100% invece di min-height:100% .

EDIT 2: aggiunti commenti extra ai CSS. Aggiunte alcune altre istruzioni sopra.

Il CSS:

 html{ min-height:100%;/* make sure it is at least as tall as the viewport */ position:relative; } body{ height:100%; /* force the BODY element to match the height of the HTML element */ } #cloud-container{ position:absolute; top:0; bottom:0; left:0; right:0; overflow:hidden; z-index:-1; /* Remove this line if it's not going to be a background! */ } 

L’html:

    

Perché?

 html{min-height:100%;position:relative;} 

Senza questo il DIV del contenitore cloud viene rimosso dal contesto di layout dell’HTML. position: relative assicura che il DIV rimanga all’interno della casella HTML quando viene disegnato in modo che bottom:0 riferisca alla parte inferiore della casella HTML. Puoi anche usare height:100% sul cloud-container poiché ora si riferisce all’altezza del tag HTML e non al viewport.

Con HTML5, il modo più semplice è semplicemente di fare height: 100vh . Dove ‘vh’ sta per viewport height della finestra del browser. Risposte al ridimensionamento del browser e dei dispositivi mobili.

Puoi imbrogliare usando le colonne di Faux Oppure puoi usare alcuni trucchi CSS

Ho avuto un problema simile e la soluzione era di fare questo:

 #cloud-container{ position:absolute; top:0; bottom:0; } 

Volevo un div centrato sulla pagina con altezza pari al 100% dell’altezza della pagina, quindi la mia soluzione totale era:

 #cloud-container{ position:absolute; top:0; bottom:0; left:0; right:0; width: XXXpx; /*otherwise div defaults to page width*/ margin: 0 auto; /*horizontally centers div*/ } 

Potrebbe essere necessario creare un elemento genitore (o semplicemente “corpo”) con position: relative;

È semplice usare una tabella:

  100% Height test  
Nav area
Content blabla... text
text
text
text

Quando è stato introdotto il DIV, le persone hanno avuto tanta paura dei tavoli che il povero DIV è diventato il martello metaforico.

Usa la posizione assoluta. Nota che questo non è il modo in cui generalmente utilizziamo la posizione assoluta che richiede la deposizione manuale delle cose o la presenza di windows di dialogo fluttuanti. Questo si allungherà automaticamente quando ridimensioni la finestra o il contenuto. Credo che ciò richieda la modalità standard, ma funzionerà in IE6 e versioni successive.

Basta sostituire il div con id ‘thecontent’ con il tuo contenuto (l’altezza specificata c’è solo per l’illustrazione, non devi specificare un’altezza sul contenuto effettivo.

 

Il modo in cui funziona è che il div esterno funge da punto di riferimento per la barra di navigazione. Il div esterno è allungato dal contenuto del div “content”. La barra di navigazione usa il posizionamento assoluto per estendersi all’altezza del suo genitore. Per l’allineamento orizzontale rendiamo il contenuto div offset della stessa larghezza della barra di navigazione.

Questo è reso molto più semplice con il modello CSS3 della casella flessibile, ma non è ancora disponibile in IE e ha alcuni dei suoi capricci.

Ho avuto lo stesso problema di te. Volevo fare un DIV come sfondo, perché, perché è facile da manipolare div attraverso javascript. Ad ogni modo tre cose che ho fatto nel css per quel div.

CSS:

 { position:absolute; display:block; height:100%; width:100%; top:0px; left:0px; z-index:-1; } 

Se stai mirando a browser più moderni, la vita può essere molto semplice. provare:

 .elem{ height: 100vh; } 

se ne hai bisogno al 50% della pagina, sostituisci 100 con 50.

 * { margin: 0; } html, body { height: 90%; } .content { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto ; } 
 document.body.onload = function () { var textcontrol = document.getElementById("page"); textcontrol.style.height = (window.innerHeight) + 'px'; } 
    

Semplice, avvolgilo in un tavolo div …

L’HTML:

 
some text
My Navigation or something

Il CSS:

  

Voglio coprire l’intera pagina web prima di richiedere un popup modale. Ho provato molti metodi usando CSS e Javascript, ma nessuno di loro è stato d’aiuto finché non ho trovato la seguente soluzione. Funziona per me, spero che ti aiuti anche tu.

        

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content

Original content