posizione: assoluto, div sotto div

Question

Ho 3 div, ognuno di essi ha position: absolute.

Prima è l'intestazione, e il suo funzionamento.

L'intestazione ha un'altezza costante e anche il secondo "contenuto" di divisione funziona.

Terzo div è "piè di pagina".

"Contenuto" ha altezza variabile e quando "contenuto" è superiore alla finestra del browser Web, il "footer" è su "contenuto". Voglio "footer" sotto "content" indipendentemente dall'altezza del contenuto.

L'intestazione è alta 300 px, il contenuto è margin-top: 300px. Non posso usare lo stesso per il footer, perché il contenuto non ha altezza costante.

Non voglio impostare un div con position: absolute, e questi 3 div collocano all'interno di questo.

div#header{ 
    width: 960px; 
    height: 200px; 
    left: 50%; 
    margin-left: -480px; 
    position: absolute; 
} 

div#content{ 
width: 960px; 
border: 1px solid black; 
left: 50%; 
margin-left: -480px; 
position: absolute; 
margin-top: 200px; 
} 

div#footer{ 
    width: 960px; 
    height: 30px; 
    left: 50%; 
    margin-left: -480px; 
    position: absolute; 
    bottom: 10px; /*with this i've div fixed to the bottom of web-browsers' window */ 
    clear: both; 
    } 

Answer 1

mi consiglia di utilizzare i CSS galleggia

fare qualcosa di simile:

<div id="wrapper"> 
    <div id="header">...</div> 
    <div id="content">...</div> 
    <div id="footer">...</div> 
    <div class="clear"></div> 
</div> 

Impostare il sito di larghezza sulla confezione e lasciare che gli altri div hanno la stessa larghezza.

Uso float: left sulla intestazione, contenuti e piè di pagina

Set clear: both sulla chiara-div.

Ora puoi impostare l'altezza sugli elementi che vuoi avere un'altezza fissa e non devi preoccuparti del posizionamento assoluto. Se insisti sull'uso del posizionamento, puoi semplicemente posizionare l'involucro.

Answer 2

Hai superato il posizionamento.

Non è necessario posizionare tutto assolutamente a meno che non ci sia qualcosa che non si condivide.

JSBin Example

Answer 3

Se siete disposti ad utilizzareposition : relative che è un po 'meglio di quanto position : absolute in casi come questo, http://jsfiddle.net/vFTXg/1/ - Prova a modificare il valore dell'altezza del tuo contenuto qui e il tuo piè di pagina verrà regolato automaticamente .

CSS

.header { 
    position : relative; 
    width : 100%; 
    height : 90px; 
    background-color : #000; 
} 
.content{ 
    position:relative; 
    width : 100%; 
    min-height : 200px; 
    background-color : #f00; 
} 
.footer{ 
    position:relative; 
    width : 100%; 
    height : 50px; 
    background-color : #0f0; 
} 

HTML

<div class='header'></div> 
<div class='content'></div> 
<div class='footer'></div> 

Answer 4

Nel futuro del browser in grado di calcolare. Per il tuo esempio, potrebbe essere utile calcolare l'altezza minima per il contenuto per impostare il più basso sul fondo se l'altezza del contenuto è bassa e impostare il piè di pagina dopo il contenuto se ha un valore di altezza. Per esempio.:

HTML:

<div id="header" class="content">header</div> 
<div id="content" class="content">content</div> 
<div id="footer" class="content">footer</div> 

CSS:

html, body { 
    height: 100%; 
} 
.content { 
    position: relative; 
    width: 960px; 
} 
#header { 
    height: 200px; 
} 
#content { 
    border: 1px solid black; 
    min-height: -moz-calc(100% - 302px); 
    min-height: -webkit-calc(100% - 302px); 
    min-height: calc(100% - 302px); 
} 
#footer { 
    height: 100px; 
} 

Purtroppo solo Firefox e IE9 e superiori supporto calc al momento, quindi questo è più teorica. Se si desidera testarlo, vedere questo jsfiddle.
Se si desidera eseguire questa operazione con tutto il browser corrente, è necessario utilizzare javascript.

Answer 5

Se si desidera qualcosa per essere di larghezza costante e centrato provare questo

#footer, 
#header, 
#footer { 
    width: 960px; 
    margin: 0 auto; 
} 

e dimenticare

left: 50%; 
margin-left: -480px; 
position: absolute;