親divの下にdivスティックを作る方法は？

Question

だれでも助けてくださいdiv#bottomは親の底に付いていますdivのボタンをクリックすると、その上にあるdiv#listの要素を表示できますか？

好ましく私はJSなど、jQueryのを回避したいと思うか、少なくともレイアウトで：

<div class="wrapper"> 
    <div id="top"> 
    <ul> 
     ... 
     ... 
    </ul> 
    </div> 
    <div class="bottom"> 
     <div id="button"> 
     <div id="list"> 
      <ul> 
       <li>elem 1</li> 
       <li>elem 2</li> 
      </ul> 
     </div> 
     </div> 
    </div> 
</div> 

Answer 1

.wrapper{position:relative;} 
.bottom{position:absolute; bottom:0;} 

編集 @ centr0へ

おかげで、@TJクラウダー ここで理解しておくべき重要なことは、.wrapperのposition:relativeには、position:absoluteの要素がすべて含まれることです。それは.bottomの境界を宣言するようなものです。 position:relativeが.wrapperにない場合、.bottomはそれを破ります。div

Answer 2

私は同様の問題に遭遇します。 Valからの解決策は良いですが、問題が1つあります。内側のdivは底に張り付いていますが、 "position：absolute;"のおかげで、parrent divの高さには影響しません。 （ページレイアウトフローから外れています）。だからここ

が似問題を持つ人のための私の拡大ソリューションです：あなたが見ることができるように

.wrapper { 
    position: relative; 
    padding-bottom: 50px; 
} 

.wrapper .bottom { 
    position: absolute; 
    bottom: 0px; 
    height: 50px; 
} 

、私はラッパーの.bottomのANGパディング下の高さを設定します。欠点は、フッターの高さが2か所にあることです。しかし、私はそれがボックスのフッターの固定された高さ（価格などのような）がある製品リストのための良い解決策だと思います。

「position：absolute;」を設定するたびに、position属性を設定した最初の親divに対して要素が絶対的に配置されることに注意してください。または、最終的に、ページ自体に対して。