Fußzeile unter Inhalt halten

Question

Ich habe zwei divs nebeneinander positioniert mit absoluter. aber wenn ich versuche, eine Fußzeile zu machen, erscheint es hinter den zwei divs. wie kann ich es unter ihnen haben? es muss dynamisch sein, also wenn ich einen der divs größer mache, bleibt die Fußzeile darunter.

Hier ist eine schnelle Geige, die ich gemacht habe, um es zu zeigen. https://jsfiddle.net/po7159rf/ oder

`<div class="left"> 
    <p>left div</p> 
</div>` 

`<div class="right"> 
    <p>right div</p> 
</div>` 

`<footer>Footer</footer>` 

`.left { 
    position: absolute; 
    left: 10%; 
    background-color: red; 
}` 

`.right { 
    position: absolute; 
    left: 80%; 
    background-color: blue; 
}` 

`footer { 
    width: 100%; 
    background-color: green; 
    text-align: center; 
}` 

Answer 1

Sie können dies erreichen, indem das Hinzufügen eines Eltern div und rechten divs nach links. Legen Sie die Eigenschaft min-height und relative positioning auf den übergeordneten div fest. Den geänderten Code finden Sie unten.

<style> 
.parent { 
    position: relative; 
    min-height: 70px; 
} 

.left { 
    position: absolute; 
    left: 10%; 
    background-color: red; 
} 

.right { 
    position: absolute; 
    left: 80%; 
    background-color: blue; 
} 

footer { 
    width: 100%; 
    background-color: green; 
    text-align: center; 
} 

<div class="parent"> 
<div class="left"> 
    <p> 
     left div 
    </p> 
</div> 

<div class="right"> 
    <p> 
     Right div 
    </p> 
</div> 
</div> 

<footer> 
Footer 
</footer>