フッターをコンテンツの下に保持する

Question

私は絶対に絶対的な位置に2つのdivを配置しています。しかし、私がフッタを作ろうとすると、それは2つのdivの後ろに現れます。どうすればそれらをその下に置くことができますか？それは動的である必要があるので、私がdivsの1つを大きくすると、フッターは下にとどまります。

ここに私はそれを示すために作った素早いフィドルです。 https://jsfiddle.net/po7159rf/ または

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

あなたは左と右のdivのために親のdivを追加することによって、これを達成できます。親divに最小高さと相対位置付けプロパティを設定します。 以下の変更されたコードを見つけてください。

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