本文目录

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

🌙
手机阅读
本文目录结构

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

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

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

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

HTML 代码如下:

  1. <body>
  2. <div id="wrapper" class="minwidth">
  3. <!--顶部-->
  4. <div id="header">
  5. <h1>根据浏览器宽度自动把布局从三栏切换成两栏加底栏</h1>
  6. </div>
  7. <!--左侧和中间的-->
  8. <div id="main">
  9. <div id="extrabar">
  10. <p>这里是ID为extrabar的层...</p>
  11. </div>
  12. <div id="content">
  13. <p>因为要把主内容放这里又想先显示..所以.多套了个div</p>
  14. <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
  15. <p>XXXXXXXXXXXXXXXXXXXXXXXXX</p>
  16. <p>相关资料:<a title="关于脚本使用的相关说明." href="#">本布局代码</a></p>
  17. </div>
  18. </div>
  19. <!--要活动的DIV-->
  20. <div id="sidebar">
  21. <div class="box s1">
  22. <p>在ID为sidebar的层里的一个小栏1</p>
  23. </div>
  24. <div class="box s2">
  25. <p>在ID为sidebar的层里的一个小栏2</p>
  26. </div>
  27. <div class="box s3">
  28. <p>在ID为sidebar的层里的一个小栏3</p>
  29. </div>
  30. </div>
  31. <div id="footer">
  32. <p>底部的:XXXXXXXXXXXXXXXXXXXXXXXX.</p>
  33. </div>
  34. </div>
  35. </body>

CSS 代码如下:

  1. <style type="text/css">
  2. *{ margin:0; padding:0}
  3. body{ text-align:left;}
  4. #wrapper{margin: 0 auto;}
  5. #header,#footer{clear:both;text-align:center;background: orange;}
  6. /*主要CSS*/
  7. #main{float:left;width:720px;}
  8. /*左侧边栏的小DIV*/
  9. #extrabar{ float:left; width:240px; height:360px; color:#fff; background-color:#6666CC; }
  10. /*中间栏的大DIV*/
  11. #content{ float:right; width:480px; height:360px; color:#333; background-color:#efefef; }
  12. /*浮动的box设置*/
  13. #sidebar{ float:left;}
  14. .box{ float:left; width:240px; height:120px; }
  15. /*小宽和大宽*/
  16. .minwidth{ width:720px; }
  17. .maxwidth{ width:960px; }
  18. /*小宽和大宽分别对应的边栏宽度*/
  19. .minwidth #sidebar{ width:720px; }
  20. .maxwidth #sidebar{ width:240px; }
  21. /*浮动DIV的设置*/
  22. .s1{ color:#fff; background-color:#6600CC; }
  23. .s2{ color:#fff; background-color:#6666CC; }
  24. .s3{ color:#fff; background-color:#6633CC; }
  25. /*通用样式*/
  26. h1,p{padding:10px;}
  27. </style>

JavaScript 代码如下:

  1. <script>
  2. wraphandler = {
  3. init: function() {//init(初始化)
  4. wraphandler.setWrapper();
  5. wraphandler.addEvent(window,"resize",wraphandler.setWrapper);
  6. },
  7. setWrapper: function() {//设置wrapper的DOM结果
  8. var theWidth;
  9. if (window.innerWidth) {//下面是innerWidth的兼容写法,innerWidth是不兼容的
  10. theWidth = window.innerWidth
  11. } else if (document.documentElement&&document.documentElement.clientWidth) {
  12. theWidth = document.documentElement.clientWidth
  13. } else if (document.body) {
  14. theWidth = document.body.clientWidth
  15. };
  16. if (theWidth != 0) {//下面是主代码
  17. if (theWidth < 1000) {
  18. document.getElementById('wrapper').className = 'minwidth';
  19. } else {
  20. document.getElementById('wrapper').className = 'maxwidth';
  21. }
  22. }
  23. },
  24. addEvent: function( obj, type, fn ) {//DOM二级事件;
  25. //DOM二级事件有兼容性问题;addEventListener在IE里不好使;
  26. if ( obj.attachEvent ) {
  27. obj['e'+type+fn] = fn;
  28. obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
  29. obj.attachEvent( 'on'+type, obj[type+fn] );
  30. } else {
  31. obj.addEventListener( type, fn, false );
  32. }
  33. }
  34. };
  35. wraphandler.addEvent(window,"load",wraphandler.init);
  36. /*HTML DOM innerheight、innerwidth 属性
  37. 只读属性,声明了窗口的文档显示区的高度和宽度,以像素计。
  38. 这里的宽度和高度不包括菜单栏、工具栏以及滚动条等的高度。
  39. IE 不支持这些属性。它用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代。*/
  40. </script>

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了