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

我们需要在可滚动div中显示数据。复杂滚动行为在Div中的宽度问题

我们已经创建了一个简单的小提琴证明：http://jsfiddle.net/ZsQ5J/3/

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

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

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

我们已经在CSS中获得了大部分途径，但是我们无法获得内容div来扩展标题的全部宽度。因为，我想，使内容分区100％的包含div不是标题的全部宽度。

在更深入一点：

部首：

我们想报头留可见所有的时间滚动向上/向下内容时。然而，标题比包含div更宽，所以我们希望它水平滚动。（所以没有垂直滚动的标题，只是水平）。我们已经有这部分工作。标题是一张表。

CONTENT：

内容是，我们希望（与插头同步）滚动的水平和垂直（独立地报头的）一个div。这是我们遇到问题的部分。滚动工作正常，但宽度不扩展以匹配标题。它只会和包含div一样宽。

我知道有一个表格作为标题和一个div作为内容很奇怪，但由于遗留问题，我们需要保持这种方式。

来源

2012-03-07 salonMonsters

不是从问题确定是否可以添加除elemnts来标记，但是如果可以的话，可能的解决方案是这样的：http://jsfiddle.net/ZsQ5J/8/

但有可能出现的问题 - 滚动条将不可见bu默认。这样可以吗？

来源

2012-03-07 21:07:40

谢谢阿列克谢，看起来很有希望！我会尝试在我们的应用程序的完整版本的div :) – salonMonsters 2012-03-07 21:19:06

工作得很好。非常感谢Alexy！ – salonMonsters 2012-03-08 00:32:12

不知道这是否正是你想要的，但这个工程。 -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; 
}

来源

2012-03-07 20:08:58 Wakeeta

您好Wakeeta，感谢您的回复。是的，但是，标题和内容的宽度是可变的，所以除非我使用jQuery（我们可能必须诉诸的一个选项），我无法将宽度设置为像素值。对不起，我忘了提及它在原始文章中的宽度是可变的。 – salonMonsters 2012-03-07 20:22:21

啊，我明白了。我会继续看着它，让我们知道如果我能找出其他的东西。 – Wakeeta 2012-03-07 20:37:42

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

回答

相关问题