CSS 根据浏览器宽度自动把布局从三栏切换成两栏加底栏

🌙
手机阅读
本文目录结构

思路是开始布局一个界面;

然后做浮动;右侧三个 DIV 宽度相加等于左侧大的 DIV 宽度;

高度相加等于左侧大的 DIV 高度!

不在不同的宽度下有不同的表现;如下图

HTML 代码如下:

    <body>
    <div id="wrapper" class="minwidth">
        <!--顶部-->
        <div id="header">
            <h1>根据浏览器宽度自动把布局从三栏切换成两栏加底栏</h1>
        </div>
        <!--左侧和中间的-->
        <div id="main">
            <div id="extrabar">
                <p>这里是ID为extrabar的层...</p>
            </div>
            <div id="content">
                <p>因为要把主内容放这里又想先显示..所以.多套了个div</p>
                <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
                <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
                <p>相关资料:<a title="关于脚本使用的相关说明." href="#">本布局代码</a></p>
            </div>
        </div>
        <!--要活动的DIV-->
        <div id="sidebar">
            <div class="box s1">
                <p>在ID为sidebar的层里的一个小栏1</p>
            </div>
            <div class="box s2">
                <p>在ID为sidebar的层里的一个小栏2</p>
            </div>
            <div class="box s3">
                <p>在ID为sidebar的层里的一个小栏3</p>
            </div>
        </div>
        <div id="footer">
            <p>底部的:XXXXXXXXXXXXXXXXXXXXXXXX.</p>
        </div>
    </div>
    </body>

CSS 代码如下:

<style type="text/css">
    *{ margin:0; padding:0}
    body{ text-align:left;}
    #wrapper{margin: 0 auto;}
    #header,#footer{clear:both;text-align:center;background: orange;}
    /*主要CSS*/
    #main{float:left;width:720px;}
        /*左侧边栏的小DIV*/
    #extrabar{  float:left;  width:240px;  height:360px;  color:#fff;  background-color:#6666CC;  }
        /*中间栏的大DIV*/
    #content{  float:right;  width:480px;  height:360px;  color:#333;  background-color:#efefef;  }
    /*浮动的box设置*/
    #sidebar{ float:left;}
    .box{  float:left;  width:240px;  height:120px;  }
    /*小宽和大宽*/
    .minwidth{  width:720px;  }
    .maxwidth{  width:960px;  }
    /*小宽和大宽分别对应的边栏宽度*/
    .minwidth #sidebar{  width:720px;  }
    .maxwidth #sidebar{  width:240px;  }
    /*浮动DIV的设置*/
    .s1{  color:#fff;  background-color:#6600CC;  }
    .s2{  color:#fff;  background-color:#6666CC;  }
    .s3{  color:#fff;  background-color:#6633CC;  }
    /*通用样式*/
    h1,p{padding:10px;}
</style>

JavaScript 代码如下:

<script>
    wraphandler = {
        init: function() {//init(初始化)
            wraphandler.setWrapper();
            wraphandler.addEvent(window,"resize",wraphandler.setWrapper);
        },
        setWrapper: function() {//设置wrapper的DOM结果
            var theWidth;
            if (window.innerWidth) {//下面是innerWidth的兼容写法,innerWidth是不兼容的
                theWidth = window.innerWidth
            } else if (document.documentElement&&document.documentElement.clientWidth) {
                theWidth = document.documentElement.clientWidth
            } else if (document.body) {
                theWidth = document.body.clientWidth
            };
            if (theWidth != 0) {//下面是主代码
                if (theWidth < 1000) {
                    document.getElementById('wrapper').className = 'minwidth';
                } else {
                    document.getElementById('wrapper').className = 'maxwidth';
                }
            }
        },
        addEvent: function( obj, type, fn ) {//DOM二级事件;
            //DOM二级事件有兼容性问题;addEventListener在IE里不好使;
            if ( obj.attachEvent ) {
                obj['e'+type+fn] = fn;
                obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
                obj.attachEvent( 'on'+type, obj[type+fn] );
            } else {
                obj.addEventListener( type, fn, false );
            }
        }
    };
    wraphandler.addEvent(window,"load",wraphandler.init);
    /*HTML DOM innerheight、innerwidth 属性
    只读属性,声明了窗口的文档显示区的高度和宽度,以像素计。
    这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
    IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。*/
</script>

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

书籍推荐

本文目录