位置响应固定按钮到 div 容器 css

Question

我想在右下角响应地放置一个按钮。到目前为止，我已经把按钮固定在居中的容器上。

问题

如果我在任何时候拉伸页面（上下，或横向上下）它会消失/失去焦点一秒钟。

预期的：

我希望这个黄色按钮始终可见，即使浏览器已拉伸。

代码：

     .container{
     margin:0 auto;
     max-width:480px;
     height: 50vh;
     width: 100%;
     text-align:center;
     background:blue;
      }
    .fixed_button{
    position: fixed;
    bottom: 10px;
    width: 70px;
    height: 20px;/*height: auto;*/
    margin-left: 405px;
    border: 0px solid #d6d6d6;
    z-index: 99;
    padding: 0;
    text-align: center;
    background: yellow;
     }
     .spaces{
      width: 100%;
      height: 500px;
      border: 1px solid #000;
     }

  <div class="container">
  <div class="spaces"></div>
  <div class="spaces"></div>
  <div class="spaces"></div>
  <div class="spaces"></div>
  <div class="spaces"></div>
        <div class="fixed_button"></div>
 </div>

此外，如果您想查看可见性效果，只需打开 snippet ，单击 full page 并拉伸您的窗口。

容器：蓝色和固定按钮：黄色。

顺便说一句，容器有一个 croll 来加载插件，所以只要用户向下滚动页面它就会向下增长，所以 .container 增长并且按钮不能绝对定位。

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

Answer 1

您可以使用绝对位置对齐 div 底部的按钮。您可以尝试将您的 css 更改为此。

     .fixed_button{
     position: absolute;
     bottom: 5px;
     right: 5px;
     width: 70px;
     border: 0px solid #d6d6d6;
     //wrest of your styles
     }

这应该具有您正在寻找的行为。希望这可以帮助

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