div + css 简单布局

来源:互联网 发布:重装系统后c盘数据恢复 编辑:程序博客网 时间:2024/05/16 09:30

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div + css 简单布局</title>
</head>

<body style="margin:0; padding:0">
<div style="height:200px; width:1000px; margin:0 auto; border:1px solid; text-align:center; line-height:200px">
这里是banner
</div>
</body>
<div style="height:100%; width:1000px; margin:0 auto">
<div id="left" style="width:200px; float:left; clear:left; border:1px solid; border-right:none; text-align:center">
左侧
</div>
<div id="main" style="width:797px!important;height:500px;width:798px; float:right; clear:right;border:1px solid; text-align:center">
右侧<br/>
</div>
</div>
<script>
function setHeight(){
 var left= document.getElementById("left")
 var main = document.getElementById("main")
 if(left.clientHeight>main.clientHeight){
  main.style.height = left.clientHeight+"px"
 }else{
  left.style.height = main.clientHeight+"px"
 }
}
setHeight()
</script>
<div style="height:100px; float:left; clear:left;  width:1000px; margin:0 auto; border:1px solid; text-align:center; line-height:100px">
这里是底部信息
</div>
</body>
</html>