CSS 自动填充高度(宽度), 无需JS代码

[lzpong]

CSS 自动填充高度(宽度), 无需JS代码

css 就可以设置自动填充高度/宽度，
例如，上面N层或N个元素, 下面的div，要填充剩余的 高度(上面的高度是固定的), 并且页面不出现滚动条：

#content {
    position: absolute;
    top: 50px;
    bottom: 0px;
}

此时,改变浏览器窗口大小,或最大化浏览器, 就可以看到#content元素自适应窗口高度了！
重点是要top和bottom一起使用，可以强制定义盒模型的区域的上下边界,自然就起到了自适应高度了；
但是 ， 还有个重点，#content 元素的 parent ， 要设置高度，如： height:100%。
position: absolute 这个属性也是必要的啦！

如果#content元素上面的高度不是不固定的,可能会有问题的。

同理，要自适应宽度，即设置 left ，right 属性，父元素的宽度。
如果要自适应高宽，那就四个属性都设置,加,父元素的高宽。

有点像C# 中的 dock，锁住上下左右的距离的味道，，，可不就是么！

如果显示 有问题，调整调整 css 里的边界距离就好啦！

如果#content元素中的内容过多，需要此元素有滚动条，给它加上overflow: auto就好啦！

#content {
    position: absolute;
    top: 50px;
    bottom: 0px;
    overflow: auto;
}

参考此博文

[lzpong]

iframe貌似用这种方式是失效的，所以，只能用JS了：

container=$("#container")[0];

window.onresize=function(){
  var h=window.innerHeight?window.innerHeight:document.body.clientHeight;
  container.style.height=(h-60)+"px";
}
window.onresize();

#container{
overflow: auto;
width: 100%;
border: none;
}

而且，要减去上面元素的高度：(h-60)+"px";(此处是60px)。