div 横向布局 中间高度自适应

<html>
<div id="header" style="height:100px; background-color:red"></div>
<div id="content" style="overflow-y:auto; background-color: yellow">会自动出现滚动条</div>
<div id="footer" style="height:100px; background-color:blue"></div>
<script type="text/javascript">
function resizeContent(){
    availHeight = parseInt(document.body.clientHeight);
    header_height=parseInt(document.getElementById("header").style.height);
    footer_height=parseInt(document.getElementById("footer").style.height);
    content_height=(availHeight-header_height-footer_height)+"px";
    document.getElementById("content").style.height=content_height;
}
resizeContent();
window.onresize=resizeContent;
</script>
</html>

猜你喜欢

转载自forlab.iteye.com/blog/1728239