1

スクロールしないヘッダーを使用して、スクロールバーがある場合とない場合があるブロックを作成しようとしています。秘訣は、スクロールバーの存在によってヘッダーの幅が影響を受けることです。

これは些細なはずの CSS ユースケースの 1 つですが、実際には不可能である可能性があるのではないかと心配しています。私が間違っていることを証明してくれる人はいますか？

4

3 に答える 3

1

CSSだけでこれを行う方法がわかりません。そこで、JavaScript (ここでは jQuery) を使用するソリューションを示しますが、コンテンツが変更された場合にのみ実行されます。ラッパーのサイズがウィンドウのサイズに依存する場合は、サイズ変更時に実行する必要がある場合もあります。その核心は次のとおりです。

$.fn.fitTo = function(target){
    var $el = $(this);
    $(target).bind('refit', function(){
        $el.width(this.clientWidth);
    });
}

コンテンツを含む要素のカスタム イベントに$header.fitTo($content)ヘッダーをバインドするために呼び出します。refitここで、スクロール バーが表示または非表示になるなど、コンテンツが変更された場合はいつでも…</p> 

$content.trigger('refit');

…ヘッダーの幅は、clientWidthコンテンツを含む要素の幅にリセットされます。ヘッダーはスクロール要素の外にある必要があります。

実施例

于 2011-03-26T18:58:31.020 に答える
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/で実際の例を確認してください

于 2011-03-08T07:07:53.633 に答える
1

ここにいくつかの指針があります

http://davidchambersdesign.com/css-fixed-position-headers/

固定ヘッダーとスクロール本体を持つテーブルが含まれます

  1. http://imar.spaanjaars.com/357/a-scrollable-table-with-a-fixed-header
  2. http://anaturb.net/csstips/sheader.htm
于 2011-03-08T04:57:41.003 に答える