如何让div粘到父div的底部？ [英] How to make div stick to the bottom of parent div?

问题描述

任何人都可以帮助我使 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> 
  

解决方案

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

已编辑

感谢@ centr0和@TJ Crowder
这里要明白的关键是在中的 position：relative .wrapper 将包含任何具有 position：absolute 的元素。这就像为 .bottom 声明边界。在中的位置：相对 .wrapper ， .bottom 突破 div

Could anyone please help me making div#bottom stick to the bottom of the parent div, so when I click on the button inside it will allow me to show elements from div#list above itself?

Preferably I would want to avoid JS, jQuery, etc. or at least in the layout:

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

解决方案

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

Edited

Thanks to @centr0 and @T.J Crowder the key thing to understand here is that position:relative in .wrapper will "contain" any element that has position:absolute. It's like declaring boundaries for .bottom. Without position:relative in .wrapper, .bottom would break out of that div

这篇关于如何让div粘到父div的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！