利用jQuery进行三行两列等高布局
程序员文章站
2022-04-26 22:12:42
...
利用jQuery来进行等高页面布局，简单易行，而且有很好的兼容性。
准备三行两列页面布局代码：
<!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></title>
</head>
<body>
<div id="container">
<!-- // 页头 -->
<div id="header">页头</div>
<!-- // 左边导航栏 -->
<div id="left">
<div id="menu">页左</div>
</div>
<!-- // 内容显示区 -->
<div id="right">
<div class="content">内容显示区</div>
</div>
<!-- // 页脚 -->
<div id="footer">
<div>页脚</div>
</div>
</div>
</body>
</html>
页面效果如下：
装入样式表，如下所示：
<head>
......
<!-- // 引入样式表文件 -->
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
页面效果如下：
引入jQuery框架文件及编写JavaScript代码：
<head>
......
<!-- // 引入 jQuery 框架文件 -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
function initLayout() {
$('#right').width($("#container").width() - $("#left").width() - 24);
var h = document.documentElement.clientHeight - $("#header").height() - $("#footer").height() - 20;
$('#left').height(h);
$('#right').height(h);
};
initLayout();
$(window).resize(function(){
initLayout();
});
});
</script>
</head>
另一个实现方法：
$(function(){
$('#right').width($('#container').width() - $('#left').width() - 24);
var left = $('#left').height();
var right = $('#right').height();
(left > right) ? $('#right').height(left) : $('#left').height(right);
})
页面效果如下：
完整页面代码如下所示：
<!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></title>
<!-- // 引入样式表文件 -->
<link href="style.css" rel="stylesheet" type="text/css" />
<!-- // 引入 jQuery 框架文件 -->
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function() {
function initLayout() {
$('#right').width($("#container").width() - $("#left").width() - 24);
var h = document.documentElement.clientHeight - $("#header").height() - $("#footer").height() - 20;
$('#left').height(h);
$('#right').height(h);
};
initLayout();
$(window).resize(function(){
initLayout();
});
});
</script>
</head>
<body>
<div id="container">
<!-- // 页头 -->
<div id="header">页头</div>
<!-- // 左边导航栏 -->
<div id="left">
<div id="menu">页左</div>
</div>
<!-- // 内容显示区 -->
<div id="right">
<div class="content">内容显示区</div>
</div>
<!-- // 页脚 -->
<div id="footer">
<div>页脚</div>
</div>
</div>
</body>
</html>用到的页面样式如下所示：
body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:0px;
padding:0px;
text-align:center;
/*background-color:#0B2C8E;*/
font-weight: lighter;
color: #666;
}
#container{
width:950px;
position:relative;
margin: 0px auto;
text-align: left;
}
#header{
height:150px;
width:100%;
background-color: #F6F6F3;
background-image: url(images/header.png);
background-repeat: no-repeat;
}
#left{
float:left;
width:160px;
background-color: #F6F6F3;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 0px;
border: 1px solid #CCC;
padding: 0px;
}
#right{
float:left;
border:1px solid #CCC;
margin-top: 10px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
background-color: #FFF;
background-image: url(images/login_07.gif);
background-repeat: repeat-x;
}
#right .content {
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 150%;
font-weight: lighter;
color: #333;
margin: 20px;
}
#footer{
height:50px;
width:100%;
float:left;
background-color: #d3dff2;
}
#footer div {
text-align: center;
margin-top: 18px;
}实例页面代码可从下面附件中获得。
推荐阅读