html - 在 javascript 中调整内容大小的纯 HTML/CSS 解决方案

Question

请注意以下 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();
});

编辑

我想放宽限制。让我们假设标题的高度是已知的并且不能更改。因此，页眉和页脚都具有事先已知的固定高度。

Answer 1

如果可以接受固定高度，您可以使用position:fixed 和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 来确定页眉和页脚的大小(因此要修改 .container 的 padding 部分).

请注意，我不懂 YUI，所以我制作了无库演示。