Question

我想构建一个页面，页面中间的某个DIV元素可以水平滚动（大宽度+ overflow-x: scroll）。滚动条将显示在此DIV的底部。

是否可以在页面的最底部显示滚动条（因此不在div的底部），只滚动页面中间可滚动DIV中的内容？

我问这个问题，因为我想将内容放在可滚动的DIV下面，我希望用户能够使用位于此内容下方的滚动条滚动水平DIV。

<body>
<div id="wrap">

    <div class="slider">
        # Slider content here
    </div>

    <ul class="job_listings scrollable">
        <li>job 1</li>
        <li>job 2</li>
        <li>job 3</li>
        <li>job 4</li>
    </ul>

    <div class="about us">
        # About us content here
    </div>

    ** here I want the scrollbar of the ul job_listings to appear, at the very bottom of the page **

</div>
</body>

Answer 1

您可以通过将position: fixed;添加到不可滚动的内容来实现此目的。

.slider {
    position: fixed;
    top: 0; // Assuming you want this to be on top
}
.about_us {
    position: fixed;
    bottom: 0; // Assuming you want this to be on the bottom
}

JSFiddle demo

Answer 2

像我在这里http://jsfiddle.net/v6ohjw32/一样使用padding-bottom:180px 并删除border:2px solid green;以消除边框

水平滚动+滚动条

2 个答案: