Force Div al di sotto di un altro e prevenire la sovrapposizione

Ho due elementi Div. Il primo dovrebbe essere 100% altezza e larghezza dello schermo. Vorrei che il secondo Div fosse largo al 100% ma variabile in base al contenuto e iniziasse in linea (sotto il primo). Quindi lo schermo intero è Div 1 e devi scorrere verso il basso per vedere Div 2. Ma tutto ciò che ho provato si sovrappongono.Force Div al di sotto di un altro e prevenire la sovrapposizione

<div style="background-color:red;height:100%;width:100%;left:0px;top:0px"></div> 
<br/> 
<div style="width:100%;position:relative;background-color:yellow"> 
     <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>.. 
</div>

http://jsfiddle.net/FBJ8h/

fonte

2013-01-02 user759885

Lo stavano ristrutturando

position:absolute

rende il div non occupante, il che significa che altri elementi non "li vedono" durante l'allineamento e il posizionamento.

Utilizzare questa:

html,body { 
    height:100%; 
} 
div.div2 { 
    top:100%; 
}

JSFiddle

fonte

2013-01-02 03:39:46 Passerby

In primo luogo si deve impostare il HTML- e body-tag Altezza: 100%:

html, body { 
    height:100%; 
}

E la seconda cosa, è necessario cambiare è quello di imposta la posizione del primo div a "relativo" e non a "assoluto" (come nel file jsfiddle):

position: relative;

Spero che aiuta ...

EDIT: e rimuovere il <br> -Tag tra i due div - in caso contrario, ci sarà uno spazio bianco tra di loro ...

fonte

2013-01-02 03:37:18 atreju

eccellenti grazie questo funziona – user759885

-1

Usa dovrebbe usare "clear: both" ... aggiungere il seguente tra i tag div

<style> 
.clearfix{ 
clear:both; 
} 
</style> 
<body> 
<div class="clearfix"></div> 
<body>

fonte

2015-03-06 03:35:04

Questo non funziona Il problema è la posizione: attributo assoluto. – FrenkyB

Force Div al di sotto di un altro e prevenire la sovrapposizione

risposta

Problemi correlati