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

Question

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

我的想法是使操作表成为始终位于网页下方的固定位置元素。当我需要显示操作表时，我会进行翻译转换。

隐：

____________
|           |
|           |
|  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;
}