Forzare i div a toccarsi verticalmente

Voglio avere una pagina come this.Forzare i div a toccarsi verticalmente

Dopo aver provato un po 'di CSS e HTML codice come questo: Codice CSS:

html,body{ 
    margin:0px; 
    background-color:#CCC; 
} 
#header{ 
    background-color:#FFF; 
    height:350px; 
    width:750px; 
    display:block; 
    } 
#menu{ 
    background-color:#096; 
    height:60px; 
    width:100%; 
    display:block; 
} 
#content{ 
    background-color:#03F; 
    width:750px; 
    height:400px; 
    } 
#footer{ 
    background-color:#900; 
    height:120px; 
    width:750px; 
    display:block; 
    bottom:0px; 
    position:relative; 
    }

codice HTML:

<center> 
    <div id="header"> 

    </div> 
    <div id="menu"> 

    </div> 
    <div id="content"> 

    </div> 
    <div id="footer"> 

    </div> 
</center>

è stata la stessa cosa, ma dopo aver fatto un po' il testo in "contenuto" div è separato. come questo This.

Qual è il problema nel mio codice CSS?

fonte

2015-06-25 Shaho

si dovrebbe aggiungere le immagini direttamente alla tua domanda, non solo il collegamento li – ben

@ Ben, si può suggerire una modifica ... perché non usarlo? – LinkinTED

Sembra buono quando lo mangio: http://jsfiddle.net/pwt5g39w/ Si potrebbe provare a impostare i margini dei div a zero. – LinkinTED

È perché il tag p ha un valore predefinito margin.

Add CSS come questo

p{ 
margin:0px; 
}

Fiddle

fonte

2015-06-25 07:48:38

Grazie che era buono. Ma ho pensato che il primo blocco del mio codice CSS costringesse ogni tag nel corpo ad avere un margine di 0. Grazie ancora – Shaho

Ok bene. Non imporrà ogni tag a margine 0. Si applicherà solo a quel particolare tag nel tuo caso si trattava di tag body e html. –

Forzare i div a toccarsi verticalmente

risposta

Problemi correlati