Question

我们需要在可滚动的div中显示数据。

我们创建了一个简化的小提琴来演示：http://jsfiddle.net/ZsQ5J/3/

div包含两部分，标题和内容。

我们希望Header与内容一起水平滚动，但要在垂直滚动内容时进行修复。

如果可能的话，我们希望在CSS中完全实现这一点，我想我们可以用jQuery解决它，但我不想这样做。

我们已经在CSS中获得了大部分内容，但是我们无法获取内容div来扩展标题的整个宽度。因为，我想，将内容div设为100％包含div的大小不是标题的整个宽度。

更深入一点：

HEADER：

我们希望在向上/向下滚动内容时标题始终可见。但是标题比包含div更宽，所以我们希望它能够水平滚动。（所以标题上没有垂直滚动，只是水平）。我们已经完成了这部分工作。标题是一个表格。

内容：

内容是一个div，我们想要水平滚动（与标题同步）和垂直滚动（独立于标题）。这是我们遇到问题的部分。滚动效果很好，但宽度不会扩展以匹配标题。它只会与包含div一样宽。

我知道将一个表作为标题并使用div作为内容是很奇怪的，但由于遗留问题，我们需要保持这种方式。

Answer 1

不确定问题是否可以在标记中添加附加元素，但如果可以，可能的解决方案是：http://jsfiddle.net/ZsQ5J/8/

但是可能存在问题 - 默认情况下不会看到滚动条。这样可以吗？

Answer 2

不确定这是否正是您想要的但是这有效。 -Wakeeta

body
{
    width:100%;
}

#outer_container
{
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    width:100%;
    border:6px solid #FF0000;
    overflow-x:auto;
    overflow-y:hidden;
}
#top_container
{
    display: block;
    width:1500px;
    padding:10px;
    background-color:#CC66FF;
}
#bottom_container
{
    height: 400px;
    width:1500px;
    padding:10px;
    background-color:#FFFF66;
    overflow-y:scroll !important;
}
em
{
    font-weight:bold;
}

Div中复杂滚动行为的宽度问题

2 个答案: