私は、スクロールしないヘッダーがあるかどうかに関係なく、スクロールバーのあるブロックを作成しようとしています。トリックは、ヘッダーの幅 〜すべき スクロールバーの存在によって影響を受ける。
これは簡単なはずのCSSの使用例の1つであると心配していますが、実際には不可能である可能性があります。
回答：
回答№1は1ここにいくつかのポインタがあります
http://davidchambersdesign.com/css-fixed-position-headers/
そして、そこには固定されたヘッダーとスクロールする本体を持つテーブルが含まれます
- http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
- http://anaturb.net/csstips/sheader.htm
回答№2の場合は1
CSSだけでこれを行うことはできません。 javaScriptを使用する必要があります。 jQueryを使用すると、次のことができます
var cw = $("#container").innerWidth(),
cs = $("#container").scrollTop();
$("#header").css({
"width": cw + "px"
});
$("#container").scroll(function() {
$("#header").css({
"top": $("#container").scrollTop(),
})
})
動作例を確認してください。 http://jsfiddle.net/VswxL/2/
回答№3の場合は1
CSSでこれを行う方法がわかりません一人で。したがって、「JavaScript（ここではjQuery）を使用するソリューションですが、コンテンツが変更されたときにのみ実行されます。ラッパーのサイズがウィンドウのサイズに依存する場合は、サイズ変更時にも実行する必要がある場合があります。ここで」その中心：
$.fn.fitTo = function(target){
var $el = $(this);
$(target).bind("refit", function(){
$el.width(this.clientWidth);
});
}
コール $header.fitTo($content) ヘッダーをカスタムにバインドする refit コンテンツを持つ要素のイベント。ここで、スクロールバーが表示または非表示になるようにコンテンツが変更された場合は常に、実行してください...
$content.trigger("refit");
…そしてヘッダーの幅はにリセットされます clientWidth コンテンツを含む要素の。ヘッダーは 外側 スクロール要素。