Question

我已经将Bootstrap模式修改为其中而不是溢出页面并允许页面滚动它而是适合页面并允许内容滚动。然后在模态体内部我设置了一个固定的位置div position: fixed; bottom: 0;（我希望将这些代码保存在体内，因为我是如何动态填充它的。）

在桌面上，你可以看到它按预期工作，固定的div固定在模态的底部。

示例：
http://www.bootply.com/wkYieH2mpt

但是，如果您在iPad上打开相同的示例，则固定的div会向上滚动内容。然后，如果你然后捏合以按预期缩放底部的重绘条。

我的印象是，自从iOS 5这样的问题得到解决以来，我已经修复了这个问题：CSS "position: fixed;" on iPad/iPhone?我正在使用iOS 9.3.4并在Chrome和Safari中进行过测试。

以下是完整性代码：

HTML：

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vel est eget elit gravida blandit quis non ipsum. Sed suscipit vulputate libero sit amet lacinia. Morbi tempus eleifend lectus, id dapibus arcu rutrum eu. Proin volutpat pretium diam at tincidunt. Sed a maximus odio. Pellentesque in aliquam nibh. Etiam blandit dictum metus, ac interdum risus gravida a. Vestibulum cursus imperdiet suscipit. Nunc non dui posuere, maximus nisi id, egestas ex. Aenean consectetur lacinia varius. Nulla sit amet convallis tortor. Integer at massa ante. Donec ultricies augue mauris, a gravida magna aliquet ac. Nunc suscipit urna lorem, eu sodales quam sodales in.
                Pellentesque ut hendrerit ipsum. Nulla tristique tellus eu ex dictum semper. Mauris tempor orci vitae est pretium sagittis. In sodales ligula ac elit accumsan, a congue odio lobortis. Duis eleifend convallis urna sed bibendum. Aliquam dictum massa ac lectus fringilla, non pulvinar justo placerat. Etiam pretium sodales sem, a dictum turpis sagittis vitae.
                Nam fringilla volutpat blandit. Nam nec risus dolor. In bibendum, velit ac lacinia auctor, turpis purus mollis neque, nec porta mauris lacus ac est. Fusce finibus, libero sed tincidunt luctus, nisi dolor posuere leo, et feugiat elit nisi condimentum dolor. Duis tempus orci a purus tristique, at bibendum velit euismod. Nam consectetur eget nunc ut dictum. Curabitur et nunc quis est cursus fringilla non vulputate purus. Nam a mollis arcu, eu dignissim augue. Pellentesque imperdiet varius dui, non rhoncus lectus convallis sed. Nam lacinia tortor ligula, eu porttitor dolor bibendum at.
                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse viverra gravida magna, non euismod ex volutpat non. Duis sit amet est magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque at tempor ipsum, non vulputate ipsum. Sed varius nisl eu dui dignissim consequat. Aenean ex lectus, finibus sit amet consequat sed, vulputate hendrerit erat. Sed sollicitudin enim eu elit posuere egestas. Etiam venenatis eros odio, ut fermentum erat pretium in. Aliquam posuere dapibus tincidunt. Phasellus mattis gravida sapien, ac malesuada nulla blandit sed. Aenean sem felis, molestie vel libero interdum, ultricies finibus lacus. Nullam faucibus dolor a felis dignissim, tempus mattis metus eleifend. In tempor in erat non molestie. Quisque sodales metus elit, sed ultrices urna euismod eu.
        </div>
        <div class="anchor">
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

CSS：

/* CSS used here will be applied after bootstrap.css */
.modal-dialog,.modal-content {  
  max-height: 95vh;
  overflow: auto;
}
.modal-body {
    padding: 0;
    padding-bottom: 100px;
}
.modal-dialog {  
    margin: 2.5vh auto;  
}
.anchor{
   width: 100%;
   height: 50px;
   background: red;
   position: fixed;
   bottom:0;
 }

这是一个浏览器错误还是我只是遗漏了一些明显的东西？

Answer 1

我相信它是一个浏览器错误，因为ios上的相同行为与

有关

background-attachment: fixed;

属性。我一直在寻找它，它只是一个ios的东西......

然而，在这种情况下

.anchor{
   width: 100%;
   height: 50px;
   background: red;
   position: fixed;
   position: -webkit-sticky;
   bottom:0;
 }

应该做的工作

示例＆gt;＆gt; http://www.bootply.com/OQawSO3ycJ

Bootstrap Modal中的固定元素不会滚动

1 个答案: