ios - 如何将可变高度的固定定位元素始终保持在屏幕下方？

Question

我正在尝试在 CSS 中模拟 iOS 的操作表。

我的想法是让 action sheet 成为一个固定位置的元素，它总是在网页的正下方。当我需要显示操作表时，我会进行翻译转换。

隐藏:

____________
|           |
|           |
|  Webpage  |
|           |
|           |
|___________|
 |         |
 | Sheet   |
 |_________|

打开

____________
|           |
|  Webpage  |
| _________ |
||         ||
||  Sheet  ||
||_________||

当操作表具有静态高度时，这很容易。我可以硬编码所有值:

#sheet {
    position: fixed;
    left: 0;
    bottom: -12em;
    height: 12em;
    transition: all 0.5s ease-out;
}

#sheet.opened {
    transform: translate(0, -12em);
}

当操作表中的按钮数量可变时，我不知道该怎么办，这会影响整个表的高度。

Answer 1

参见此处:http://jsfiddle.net/uSXKe/

您可以改为在 0 和正常之间切换高度，但这需要一点 javascript:

var height = $("#action").height();
$("#action").height(height);
$("#home").click(function(){
    var $act = $("#action");
    $act.toggleClass("active");
    $act.css("height", $act.hasClass("active") ? height : "0");
});​

相关 CSS:

#action{
    height:0;
    position:absolute;
    bottom:0;
    width:100%;
    -webkit-transition:height .2s linear;
}