Layout CSS 100% altezza minima

Qual è il modo migliore per creare un elemento con un'altezza minima del 100% su una vasta gamma di browser?

In particolare se hai un layout con a headere footerdi fisso height,

come si fa a riempire la parte di contenuto centrale 100%dello spazio in mezzo con la parte footerfissa in fondo?

Sto usando il seguente: Layout CSS - 100% di altezza

Min-height

L'elemento #container di questa pagina ha un'altezza minima del 100%. In questo modo, se il contenuto richiede più altezza di quella fornita dal viewport, l'altezza di #content impone che anche #contenitore diventi più lungo. Le possibili colonne in #content possono quindi essere visualizzate con un'immagine di sfondo su #container; i div non sono celle di tabella e non hai bisogno (o desideri) gli elementi fisici per creare un tale effetto visivo. Se non sei ancora convinto; pensa a linee e sfumature traballanti invece di linee rette e semplici combinazioni di colori.

Posizionamento relativo

Poiché #container ha una posizione relativa, #footer rimarrà sempre in fondo; poiché l'altezza minima sopra menzionata non impedisce il ridimensionamento di #container, questo funzionerà anche se (o piuttosto soprattutto quando) #content impone a #container di allungarsi.

Padding-bottom

Dal momento che non è più nel flusso normale, il padding-bottom di #content ora fornisce lo spazio per il #footer assoluto. Questa imbottitura è inclusa per impostazione predefinita nell'altezza di scorrimento, in modo che il piè di pagina non si sovrapponga mai al contenuto sopra.

Ridimensiona un po 'le dimensioni del testo o ridimensiona la finestra del browser per testare questo layout.

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

Funziona bene per me.

Per impostare un'altezza personalizzata bloccata da qualche parte:

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}

<div id="outerbox">
  <div id="innerbox"></div>
</div>

Ecco un'altra soluzione basata su vh, o viewpoint height, per i dettagli, visitare le unità CSS . Si basa su questa soluzione , che utilizza invece flex.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

<main>
    <p>This is the content. Resize the viewport vertically to see how the footer behaves.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
    <p>This is the content.</p>
</main>
<footer>
    <p>This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.</p>
    <p>This is the footer.</p>
</footer>

Le unità sono vw, vh, vmax, vmin. Fondamentalmente, ogni unità è uguale all'1% della dimensione della finestra. Quindi, quando la vista cambia, il browser calcola quel valore e si adegua di conseguenza.

Puoi trovare maggiori informazioni qui:

In particolare:

1vw (viewport width) = 1% of viewport width
1vh (viewport height) = 1% of viewport height
1vmin (viewport minimum) = 1vw or 1vh, whatever is smallest
1vmax (viewport minimum) = 1vw or 1vh, whatever is largest

La risposta di kleolb02 sembra piuttosto buona. un altro modo sarebbe una combinazione del piè di pagina appiccicoso e l' hack di altezza minima

Perché min-heightfunzioni correttamente con le percentuali, mentre eredita il suo nodo genitore min-height, il trucco sarebbe impostare l'altezza del nodo genitore su 1pxe quindi quella del figlio min-heightfunzionerà correttamente.

Pagina dimostrativa

Una CSSsoluzione pura ( #content { min-height: 100%; }) funzionerà in molti casi, ma non in tutti, in particolare IE6 e IE7.

Sfortunatamente, dovrai ricorrere a una soluzione JavaScript per ottenere il comportamento desiderato. Questo può essere fatto calcolando l'altezza desiderata per il contenuto <div>e impostandolo come proprietà CSS in una funzione:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

È quindi possibile impostare questa funzione come gestore per eventi onLoade onResize:

<body onload="resizeContent()" onresize="resizeContent()">
  . . .
</body>

Concordo con Levik in quanto il contenitore padre è impostato al 100% se si dispone di barre laterali e si desidera che riempiano lo spazio per incontrarsi con il piè di pagina, non è possibile impostarli al 100% perché saranno anche il 100% dell'altezza padre significa che il piè di pagina finisce per essere spinto verso il basso quando si utilizza la funzione di cancellazione.

Pensa in questo modo se l'intestazione indica un'altezza di 50 px e il piè di pagina è un'altezza di 50 px e il contenuto viene semplicemente adattato allo spazio rimanente, ad esempio 100 px e il contenitore di pagine è al 100% di questo valore, la sua altezza sarà di 200 px. Quindi, quando imposti l'altezza della barra laterale al 100%, allora è 200px anche se dovrebbe adattarsi perfettamente tra intestazione e piè di pagina. Invece finisce per essere 50px + 200px + 50px quindi la pagina ora è 300px perché le barre laterali sono impostate alla stessa altezza del contenitore di pagine. Ci sarà un grande spazio bianco nei contenuti della pagina.

Sto usando Internet Explorer 9 e questo è ciò che ottengo come effetto quando utilizzo questo metodo al 100%. Non l'ho provato in altri browser e presumo che potrebbe funzionare in alcune delle altre opzioni. ma non sarà universale.

Per prima cosa dovresti creare un divwith id='footer'dopo il tuo contentdiv e poi semplicemente farlo.

Il tuo HTML dovrebbe apparire così:

<html>
    <body>
        <div id="content">
            ...
        </div>
        <div id="footer"></div>
    </body>
</html>

E il CSS:

​html, body {
    height: 100%;   
}
#content {
    height: 100%;
}
#footer {
    clear: both;        
}

Prova questo:

body{ height: 100%; }
#content { 
    min-height: 500px;
    height: 100%;
}
#footer {
    height: 100px;
    clear: both !important;
}

L' divelemento sotto il div contenuto deve avere clear:both.

Probabilmente la soluzione più breve (funziona solo nei browser moderni)

Questo piccolo pezzo di CSS rende "the middle content part fill 100% of the space in between with the footer fixed to the bottom":

html, body { height: 100%; }
your_container { min-height: calc(100% - height_of_your_footer); }

l'unico requisito è che è necessario disporre di un piè di pagina ad altezza fissa.

Ad esempio per questo layout:

    <html><head></head><body>
      <main> your main content </main>
      </footer> your footer content </footer>
    </body></html>

hai bisogno di questo CSS:

    html, body { height: 100%; }
    main { min-height: calc(100% - 2em); }
    footer { height: 2em; }

Puoi provare questo: http://www.monkey-business.biz/88/horizontal-zentriertes-100-hohe-css-layout/ Questo è il 100% di altezza e centro orizzontale.

condividi solo quello che sono stato usato e funziona bene

#content{
        height: auto;
        min-height:350px;
}

Come menzionato nella risposta di Afshin Mehrabani, dovresti impostare l'altezza di body e html al 100%, ma per ottenere il footer lì, calcola l'altezza dell'involucro:

#pagewrapper{
/* Firefox */
height: -moz-calc(100% - 100px); /*assume i.e. your header above the wrapper is 80 and the footer bellow is 20*/
/* WebKit */
height: -webkit-calc(100% - 100px);
/* Opera */
height: -o-calc(100% - 100px);
/* Standard */
height: calc(100% - 100px);
}