HTML 三栏自动适应

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML 三栏自动适应</title>
    <style type="text/css">
    html,body{ margin:0px; padding:0px;}
    #head{ height:80px; color:White; font-size:88px; background-color:#0066cc;}
    #left{ width:220px; float:left; color:#40474d; font-size:88px;background-color:#dfe1e3; border-right:#bcc2c7;}
    #right{ width:auto; float:left; font-size:88px; background-color:#fff999; color:#0066cc; }

    </style>

</head>
<body>

<div id="head">head</div>
<div id="left">left</div>
<div id="right">right</div>

<script type="text/javascript">

    window.onload = function() {
        setPageSize();
    }

    window.onresize = function() {
        setPageSize();
    }

    function setPageSize() {
        var h = document.documentElement.clientHeight;
        var w = document.documentElement.clientWidth;
        var headDiv = document.getElementById("head");
        var leftDiv = document.getElementById("left");

        var headHeight = headDiv.scrollHeight || headDiv.offsetHeight;
        var leftWidth = leftDiv.clientWidth || leftDiv.offsetWidth;

        var rightHeight = h - headHeight;
        var rightWidth = w - leftWidth - 1;

        document.getElementById("left").style.height = rightHeight + "px";
        document.getElementById("right").style.height = rightHeight + "px";
        document.getElementById("right").style.width = rightWidth + "px";
    }
</script>
</body>
</html>

JavaScript操作获取div长宽，动态设置div长宽，狠easy code