Force Div unter einem anderen und Überlappung zu verhindern

Ich habe zwei Div-Elemente. Der erste sollte 100% Höhe und Breite des Bildschirms sein. Ich möchte, dass die zweite Div je nach Inhalt 100% Breite, aber variable Höhe hat und inline beginnt (unter der ersten). Also ist Div 1 der ganze Bildschirm und du musst runter scrollen, um Div 2 zu sehen. Aber alles, was ich versucht habe, überschneiden sich.Force Div unter einem anderen und Überlappung zu verhindern

<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/

Quelle

2013-01-02 user759885

becasue

position:absolute

macht die div non-besetzen, was bedeutet, andere Elemente "sehen" sie nicht beim Ausrichten und Positionieren.

verwenden:

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

JSFiddle

Quelle

2013-01-02 03:39:46 Passerby

Zuerst haben Sie die HTML- und Körper-Tag auf die Höhe einzustellen: 100%:

html, body { 
    height:100%; 
}

Und die zweite Sache, die Sie ändern müssen, ist zu setze die Position der ersten div auf "relativ" und nicht auf "absolut" (wie in der jsfiddle-Datei):

Ich hoffe, es hilft ...

EDIT: und entfernen Sie die <br> -Tag zwischen den beiden divs - wenn nicht, wird es eine weiße Lücke zwischen ihnen ...

Quelle

2013-01-02 03:37:18 atreju

Ausgezeichnet danke das funktioniert – user759885

-1

sollte Gebrauch "clear: both" verwenden ... fügen Sie den folgenden zwischen den div-Tags

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

Quelle

2015-03-06 03:35:04

Diese funktioniert nicht. Problem ist Position: absolutes Attribut. – FrenkyB

Force Div unter einem anderen und Überlappung zu verhindern

Antwort

Verwandte Themen