1

次のjsFiddleを確認してください-http : //jsfiddle.net/mark69_fnd/DaYCa/14/： ここに画像の説明を入力してください

コンテンツはヘッダーとフッターの間にぴったり収まります。ヘッダーにアイテムを追加しても、レイアウトのこのプロパティは保持されます（スクロールバーに注意してください） 。次にスクロールしここに画像の説明を入力してください ます 。ここに画像の説明を入力してください コンテンツにアイテムを追加できます。 ここに画像の説明を入力してください 下にスクロールし ここに画像の説明を入力してください ます。ウィンドウのサイズを変更すると、スクロールバーが消えます。 ここに画像の説明を入力してください または、コンテンツのDOMツリーを縮小します。 ここに画像の説明を入力してください またはヘッダーのDOMツリーを縮小します。 ここに画像の説明を入力してください

この動作はコードで強制されます。純粋に宣言的な方法で同じ効果を達成するHTML/CSSトリックがあるかどうか疑問に思いました。

これがjavascriptコードです（とても幸せに保つために）：

YUI().use('node', 'event-valuechange', function(Y){
    var headerNode = Y.one('.header');
    var footerNode = Y.one('.footer');
    var contentNode = Y.one('.content');
    var containerNode = Y.one('.container');

    function set(n, node){
        var i, content = [];

        for (i = 1; i <= n; i += 1) {
            content.push('<div>'+i+'</div>');
        }
        node.set('innerHTML', content.join(''));
    }
    function restyleContent(){
       var hh, fh, ch, bw;
        hh = headerNode.getDOMNode().getBoundingClientRect().height;
        fh = footerNode.getDOMNode().getBoundingClientRect().height;
        ch = containerNode.getDOMNode().getBoundingClientRect().height;
        bw = Number(contentNode.getComputedStyle('borderWidth').slice(0, -2));
        contentNode.setStyle('height', (ch - hh - fh - bw * 2) + 'px');
    }

    Y.one('win').on('resize', restyleContent);
    Y.one('#newContent').on('valuechange', function (e) {
        set(Number(e.newVal), contentNode);
    });
    Y.one('#newHeader').on('valuechange', function (e) {
        set(Number(e.newVal), headerNode);
        restyleContent();
    });

    set(Number(Y.one('#newContent').get('value')), contentNode);
    set(Number(Y.one('#newHeader').get('value')), headerNode);
    restyleContent();
});

<strong>編集

制約を少し緩和したいと思います。ヘッダーの高さが既知であり、変更できないと仮定します。そのため、ヘッダーとフッターの両方で、事前にわかっている一定の高さが固定されています。

4

1 に答える 1

2

固定の高さが許容される場合は、position:fixedand padding/を使用しmarginてこれをアーカイブできます。

http://jsfiddle.net/DaYCa/16/

必要な部分：

.container {position:relative;padding:20px 0px 24px} /*dimension base on Chrome*/
.header {position:fixed;top:0px}
.footer {position:fixed;bottom:0px}

しかし、これが実際に受け入れられるかどうかは疑問です。あなたのデモでは、とにかくJSは避けられないので、これが役立つと思います：

http://jsfiddle.net/DaYCa/17/

「純粋な」CSS ソリューションと非常によく似ていますが、単純な JS を追加してヘッダーとフッターのサイズを決定するだけです (したがって、のpadding一部を変更し.containerます)。

私は YUI を知らないので、ライブラリなしのデモを作成したことに注意してください。

于 2012-11-08T03:42:19.537 に答える