絶対配置上の重複するdivs

Question

このトピックについてはかなりのトピックがありますが、いずれも問題を解決していません。

<div class="outer"> <!-- fixed height --> 
    <div class="inner">content</div> <!-- needs to be placed AFTER outer --> 
</div> 
<!-- the inner div should be placed here with css AND NOT overlap any of the following content --> 
<div>no overlap please</div> 

outerinner高さは、その内容に依存するが、正確な高さを有します。私は移動する必要がありますinnerの後にouterのコンテナ; を除き、以下の内容が重複しています。 inner divの高さが分からないのでをouterに使うことはできません。

質問の場合：構造はこのようにする必要があります。これはブートストラップカルーセルです。カルーセルのインジケーターを下部に置く必要があります。インジケーターはスライダーdiv内にある必要があります。

を編集する：innerコンテナをouterコンテナの底に取得する方法は問題ではありません。それを絶対的なものにして、それを一番下に置くという問題は、コンテンツが今後のdivに重複することです。

アイデア？ありがとう！

Answer 1

私は、次を考えることができます：

.outer {postion:relative;} 
.inner { 
    position: absolute; 
    top: 100%; 
} 

これは.outer後.innerが表示されます。しかし、それがあなたが意味するものではない場合は、jqueryで要素を移動してみてください。私に知らせて、私は助けようとします。

EDIT：

それはダイナミックでなければならない場合、私はJavaScriptを使用して必要がありますね、あるいは少なくとも私はCSSによって、他の方法に精通していないです。 JsfiddleでjQueryを使って作業例を参照してください：https://jsfiddle.net/r6hskbn3/3/

Answer 2

あなたはこの

.inner { 
    position: absolute; 
    top: 100%; 
}