html - 将按钮粘贴到元素底部

Question

当子元素数量不同时，有什么方法可以将子按钮元素粘贴到父元素的底部？

父元素是固定高度的，可以在子元素溢出的情况下垂直滚动。在这种情况下，按钮应该位于子列表的末尾，但如果没有子元素，或者子元素的大小不会插入父元素溢出，它应该位于父元素的底部。

是否有针对此的纯 css 解决方案？

谢谢

Answer 1

*为更可靠的方法而编辑:

基本上，如果我理解正确，您可以使用 sticky footer逻辑 - 就在面板内:

HTML:

<div class="panel-container">
    <div class="panel-content">
        <div class="wrapper">
            <p>asdfasdfasdfadfs</p>
            <!--<p>asdfasdfasdfadfs<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>-->
            <div class="push"></div>
        </div>
        <div class="footer">
            <button>Click click!</button>
        </div>
    </div>
</div>

CSS

.panel-container {width:300px;height:300px;margin:20px;background:#f2f2f2;overflow:auto;}
.panel-content {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -30px; 
}
.footer, .push {
    height: 30px; /* .push must be the same height as .footer */
}
.footer {background:#ccc;}

工作样本: http://jsfiddle.net/9SHdN/47/ (取消注释掉的 <p> 以查看长文本滚动)