如何让div粘贴到父div的底部？

任何人都可以请我帮我制作div#bottom坚持到父div的底部，所以当我点击里面的按钮，它将允许我显示div#list以上的元素本身？如何让div粘贴到父div的底部？

优选我希望避免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>

来源

2011-02-24 m1k3y3

我回答了一个类似的问题，并给出了这个例子：www.jsfiddle.net/Kyle_Sevenoaks/5fryQ/11 – Kyle

你的div'.bottom'缺少'class'属性，以防万一你回来说它不是工作:) – Val

感谢编辑:-) – m1k3y3

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

编辑

由于@ centr0和@TJ克劳德的这里要理解的关键是.wrapper中的position:relative将“包含”具有position:absolute的任何元素。这就像宣布.bottom的边界一样。没有position:relative在.wrapper,.bottom会突破div

来源

2011-02-24 14:50:02 Val

+1，但你可能想*解释*为什么它的作品，可能引用一两个参考？提及的含义（例如，其他元素将重叠，如果他们得到的那么远），等等，等等。 –

我不这样做的生活大声笑:)我只是尝试n回报的东西，所以当我需要帮助，我不觉得内疚:)但我确定'css位置相对'谷歌可以解释它好得多:) http://www.w3schools.com/css/css_positioning.asp或此页 – Val

我跑到类似的问题。 Val的解决方案很好，但有一个问题 - 内部股利将坚守底部，但由于它的“位置：绝对的”，它不会影响parrent股的高度。（它不在页面布局流程中）。

因此，这里是我的人有类似的问题扩展的解决方案：

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

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

正如你所看到的，我设置了包装的.bottom ANG填充底的高度。缺点是，页脚的高度在两个地方。但我认为这是一个很好的解决方案，例如产品列表，其中框的页脚有固定的高度（如价格等）。请记住，每次设置“position：absolute;”时，该元素都将被绝对定位为具有设置位置属性的第一个父div。或者，最终，对页面本身。

来源

2014-12-13 10:37:41

如何让div粘贴到父div的底部？

回答

相关问题