2009.12.24(6)——谢写的css+div
2009.12.24(6)——谢写的css+div我写的css+div不怎么好，看看谢写的吧 什么叫差距啊。。。
html:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>抗旱指挥系统---旱情查询服务系统</title><link rel="stylesheet" type="text/css" href="css/superfish.css" media="all"><link rel="stylesheet" href="css/frame.css" type="text/css" media="all" /> <script type="text/javascript" src="js/jquery-1.3.2.js"></script><script type="text/javascript" src="js/hoverIntent.js"></script><script type="text/javascript" src="js/superfish.js"></script><style type="text/css"></style><script type="text/javascript">/** //谢整个页面布局1.所有元素居中2.放置 header,menu,footer3.用客户端高度clientHeight减去已用高度 作为 中间 mainContent的高度.*/$(function(){$('#mainContent').css('height',document.body.clientHeight-120);$('#mainContent >div').css('height','100%');});</script></head><body><!-- 居中显示 --><center><!-- begain banner --><div id="header"><img src="images/header.gif"></img></div><!-- end banner --><!-- begain menu --><div id="mainMenu"></div><!-- end menu --><!-- begain mainContent --><divid="mainContent"><div id="left"><iframe src="left.html"></iframe></div><!-- left --><div id="right"><iframe src="map.html"></iframe></div><!-- map --></div><!-- end mainContent --><!-- begain footer --><div id="footer"><img src="images/footer.gif"></div><!-- begain footer --></center></body></html>css:
@CHARSET "UTF-8";*{margin: 0px;padding: 0px;height: 100%;width: 100%;}iframe{border: 0px;}html,body{font-size: 12px;color: #666666;background: #ffffff;}#header{height: 61px;width: 1000px;background: aqua;}#mainMenu{height: 35px;width: 1000px;overflow:hidden;}#mainContent{width: 1000px;height: 500px;}#left{width: 300px;float: left;}#right{width: 700px;float: left;}#footer{height: 20px;width: 1000px;background: gray;}
从上面可以看到 我们在css里面设置了mainContent的height，为了适应不同的分辨率，我们可以用jquery来控制一下
$(function(){$('#mainContent').css('height',document.body.clientHeight-120);$('#mainContent >div').css('height','100%');});
页:
[1]