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>
<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