将按钮固定在元素底部

Question

当子元素数量不同时，有没有一种方法可以将子按钮元素粘附到父元素底部？

父元素具有固定高度，并且在出现子元素溢出的情况下可以在垂直方向上滚动。在这种情况下，按钮应该位于子列表的末尾，但是如果没有子元素，或者子元素大小不会导致父元素溢出，则应该位于父元素底部。

是否有纯CSS解决方案？

谢谢

- dzona

---

你能否快速制作一个模拟图形？ - Vin Burgh

@VinnyBurgh 很确定他希望它像这样 http://jsfiddle.net/47UUM/，只是按钮隐藏在父div的底部。这是一个棘手的问题。 - Pete Leaning

@VinnyBurgh - 我的理解是在面板内部有一个固定页脚。 - easwee

Answer 1

*为更可靠的方法进行编辑：

如果我理解正确，您可以使用固定页脚逻辑 - 只需在面板内部使用：

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>以查看长文本的滚动）

- easwee

---

我认为他希望按钮位于溢出区域下方 - 在滚动到下方之前隐藏。 - Pete Leaning

Answer 2

好的，我不确定我是否真正理解了你的问题，但我会尝试回答：

父级 div：

<div class="options_div"> 
   <p>Text inside</p>

   <ul class="options">
       <li>option 1</li>
       <li>option 2</li>
       <li>option 3</li>
   </ul>

   <input type="button" name="go" value="Goooo!" />
</div>

CSS：

.options_div {
    width: 300px;
    height: 200px;
    overflow: scroll;
}

.options_div>ul {
    list-style: none;
}

.options_div>ul>li {
    /* do what everrrr you want with it */
}

这段代码生成一个高度为200像素的div，其中按钮位于底部。如果ul中有任何选项，则按钮会被推下并始终保持在列表末尾。

希望这能帮到你！

- Sven van Zoelen

---

我尝试过这个，但如果li元素太多，在出现滚动条时，按钮仍然保持在同一高度。它应该在列表末尾（在滚动之前不可见）。 - dzona

我更新了代码。绝对定位将按钮放在 div 元素的底部而不是列表的末尾。我删除了按钮的定位，现在应该在底部。 - Sven van Zoelen

不是。现在在列表末尾，但如果没有滚动条，则不在父级div的底部。你显然没有理解问题。 - dzona

看起来你已经有了答案。事实上，我仍然不理解你的问题，请下次尽量更清楚明确。 - Sven van Zoelen

Answer 3

这里有一个想法：

.panel {position:relative;height:300px;width:300px;background:#f2f2f2;overflow:auto;}

.varyingContent { height:280px; display:table-cell; }

.button { position:relative; height:20px;}

<div class="panel">
        <div class="varyingContent">
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        asdfadf
        <br />
        <br />
        </div>
        <button class="button">test</button>
    </div>

希望这能有所帮助。

- AGuyCalledGerald