如何创建底部切换栏？

Question

我创建了这个抽屉，但我不知道如何在右下角移动它，当你打开它时，内容来自底部。

http://jsfiddle.net/d150x4w1/

html {
  text-align: center;
  margin: 0;
}

.button {
  background-color: #a11544;
  width: 150px;
  height: 45px;
  float: right;
  -moz-border-radius-topleft: 25px 25px;
  -moz-border-radius-topright: 25px 25px;
  border-top-left-radius: 25px 25px;
  border-top-right-radius: 25px 25px;
  color:#fff;
  text-align: center;
}

.drawer-inside {
  height: 0;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  transition: height .4s ease;
  background: #c3c3c3;
}
.drawer-inside.openup {
  height: 210px;
  transition: height .7s ease;
}

Answer 1

尝试以下操作并将其添加到.button：

bottom:0px;
right:0px;
position:fixed;
overflow:hidden;

以下是.drawer：

bottom:0px;
width:100%;
position:fixed; }

这应该可以解决你的问题。

Answer 2

将按钮移至顶部（ 中的）

添加以下css规则

.drawer {
    position:fixed;
    bottom:0;
    right:0;
    width:100%;
}
.drawer-appear{clear:both;}

http://jsfiddle.net/j5xoe8xg/

演示