css - 在水平滚动父 div 时使子 DIv 保持固定

Question

我有一个父 div 溢出，因此水平滚动，它包含一个网格和一些数据，它的分页控件位于它下面的另一个 div

问题是我希望即使滚动父 div 也能修复分页 div（仅 x 滚动）

<div style="overflow:scroll">
<table>data</table>
<div id="bottom">Paging</div>
</div>

Answer 1

最简单的方法就是将底部 div 从容器中取出。这个 div 必须在容器内吗？

http://jsfiddle.net/ollie/rTjB3/

Answer 2

你有几个选择：

1. 将您的分页对象放在可滚动元素之外
2. 使用position:fixed;. 但是请注意，具有固定位置的元素是根据浏览器视口而不是父元素定位的。这意味着，您必须知道元素的尺寸才能将寻呼机放置在正确的位置。

编辑： 固定位置的小提琴

Answer 3

可滚动 div 中的固定 div

#container {
    position:absolute;
     top:150px;
    left:150px;
    width:500px;
    height:500px;
    overflow:hidden;
     border:3px dashed #ffff00;
     padding:0px;
    }

#this_scroll {
    position:absolute;
    top:0px;
    right:0px;
    width:99%;
    height:99%;
    overflow:scroll;
    border:2px solid #000;
    margin:1px;
    background:#B0BDCE;
    }

#close {
     position:absolute;
    top:2px;
     right:21px;
    width:90px;
    height:30px;
    overflow:none;
    border:2px solid #660099;
    z-index:10;
    background:#8C8C8C;
    }



<div id="container">

    <div id="this_scroll">
    <p> some </p> <p> some </p> <p> some </p>
    </div>

    <div id="close">
        close
    </div>

</div>