Divで複雑なスクロール動作の幅の問題

Question

スクロール可能なdivにデータを表示する必要があります。

我々は証明するために単純化されたフィドルを作成しました：http://jsfiddle.net/ZsQ5J/3/

divが二つの部分、ヘッダとコンテンツが含まれています。

ヘッダーをコンテンツとともに水平方向にスクロールし、コンテンツを垂直方向にスクロールしながら固定するようにします。

可能であれば、これをCSSで完全に達成したいと思っています.jQueryで解決できるかもしれませんが、そうする必要はありません。

CSSではほとんどの方法がありますが、は、ヘッダーの全幅を伸ばすためにコンテンツdivを取得できません。コンテンツdivを含むdivの100％がヘッダーの全幅ではないためです。

もう少し深さで

：私たちは、ヘッダがコンテンツ内をアップ/ダウンスクロールすべての時間表示に滞在したい

：

HEADER。しかし、ヘッダーは含まれているdivよりも広いので、水平方向にスクロールしてください。 （ヘッダーには垂直スクロールがないので、水平になります）。私たちはこの部分を働かせています。ヘッダーはテーブルです。

はCONTENT：

コンテンツは、我々は（独立にヘッダの）垂直（ヘッダと同期して）水平方向の両方にスクロールしたいDIVです。これが私たちが問題を抱えている部分です。スクロールは正常に機能していますが、ヘッダーに一致するように幅が拡張されていません。それは含まれているdivと同じくらいの幅になります。

ヘッダーとしてのテーブルとコンテンツとしてのdivを持つのは奇妙なことですが、従来の問題のためにこの方法で保存する必要があります。

Answer 1

ないあなたがマークアップする加算elemntsを追加することができたら質問から確認ができますが、できれば、可能な解決策はこれです：http://jsfiddle.net/ZsQ5J/8/

しかし、問題がある可能性がある - スクロールバーは表示されませんbuデフォルト。これは大丈夫ですか？

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; 
}