利用jQuery进行三行两列等高布局

hegz

浏览: 442701 次
性别:
来自: 茂名

最近访客更多访客>>

u012363178

zhangze6000

corn8888

咕咕鸡呜呜

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML&CSS

jQuery JavaScript CSS XHTML 框架

利用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;
}

实例页面代码可从下面附件中获得。