将按钮放在 div 或屏幕的底部

Question

我想将我的按钮放在 div 的底部或屏幕的底部（但在非固定位置）。我的代码结构如下所示：

1. 分区1
   1. 分区 2
      1. 分区 3
      2. 按钮

我想把按钮放在div 1的底部，使用jQuery设置高度（高度是屏幕的高度，所以把按钮放在屏幕底部也可能是一种解决方案）

到目前为止我已经尝试过：

CSS

 .button {
    position: fixed;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}

这使按钮（我想要的）居中并将其放置在屏幕底部，但位置是固定的，因此如果我向下滚动按钮也会向下滚动。 I’ve also tried setting the button’s position to absolute and div-1’s position to relative , this didn’t work either.

编辑： div 的高度是可变的，所以边距可能不是一个好的选择

原文由 user6038967 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需执行按钮位置：绝对而不放置 div relativ

 .button {
    position: absolute;
    bottom: 10px;
    left: 50%;
    margin-left: -104.5px; /*104.5px is half of the button's width*/
}
.test{
  height:1000px;

}

 <div class="test">
 <div>
    <div>
      <button class="button">
            test
      </button>
    </div>
  </div>
</div>

原文由 CodeWeis 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果宽度 div 50% 那么左边必须 25% 如果宽度 div 70% 那么左边必须 15%

 .center{
  position:fixed;
  bottom:20px;
  left:20%;
  width:60%;

}

 .center .btn{
     background:red;
     width:100%;
     color:white;
     font-weight:bold;
     border-radius: 64px;
    padding:10px;
  }

 <div class="center">
  <button class="btn">Login</button>
</div>

原文由 Revi Ana 发布，翻译遵循 CC BY-SA 4.0 许可协议