Question

我有一个x可滚动的div，在这里面我有一个固定大小的div来包含标题数据和一个div，它与包含与标题匹配的内容的页面大小相对应。

外部div是x-scrollable，因此标题与包含数据一起滚动。数据是可滚动的，以允许长数据列表。

但问题是，除非页面完全向右滚动，否则数据的滚动条不可见。

HTML：

<div id="outerContainer">
<div id="xScroll">
    <div id="Header">fixed height header

    </div>
    <div id="yScroll">this container ajusts to page size
        <div id="whitespace">high content is y-scrollable</div>
        <br/>
    </div>
</div>

的CSS：

#yScroll {
background:green;
position: absolute;
overflow-x: hidden;
overflow-y: auto;
width:1200px;
top: 90px;
bottom: 150px;
}
#whitespace{
    background:white;
    height:500px;
}

#Header {
    background:red;
    height:90px;
    width:1200px;
}

#xScroll {
    position:relative;
    height: 500px;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}
#outerContainer {
    background:gray;
}
#long {
    width:1200px;
}

我在以下问题上对此问题进行了演示： http://jsfiddle.net/f7sc4/

Answer 1

在div外显示滚动条的一种简单方法是：

#divID{
overflow: hidden;
width: calc(1024px + 0);
}

#divID:hover{
overflow-y:scoll;
}

适合我。我的潜水定位绝对。

Answer 2

您所要做的就是调整#yScroll的宽度。

看看：http://jsfiddle.net/f7sc4/3/

我所做的只是将max-width:100%添加到固定宽度为1200px的所有元素

Answer 3

因为所需的内容是一张桌子，所以我找到了解决问题的方法。您可以使用floatThead jquery插件来设置表格的样式，从而实现此功能（以及更多功能）：http://mkoryak.github.io/floatThead

虽然这个插件通常只允许固定的桌面高度，但您可以将一个类添加到它生成的具有相对高度的容器中。当它被放置在具有.top和.bottom属性的绝对div中时，它会与页面一起进行schales，允许固定标题，并允许在页面上进行水平和垂直滚动。

div可视区域外的滚动条

3 个答案: