请注意以下 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>编辑
我想稍微放松一下约束。让我们假设标题的高度是已知的并且无法更改。因此，页眉和页脚都具有预先已知的固定恒定高度。