Web布局中的宽高自适应有哪些

本篇内容介绍了“Web布局中的宽高自适应有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

网站设计制作过程拒绝使用模板建站；使用PHP+MYSQL原生开发可交付网站源代码;符合网站优化排名的后台管理系统；成都网站制作、成都网站设计收费合理；免费进行网站备案等企业网站建设一条龙服务.我们是一家持续稳定运营了十年的成都创新互联公司网站建设公司。

页面整体宽度自适应

先看看下面的页面基本布局图

页面分为三个部分：

(1) Header，这一部分宽度自适应

(2) Left 左边栏，为定宽200px，一般为菜单或导航

(3) Right右侧主内容区域，宽度自适应

既然做了分解，我们就把它当做需求来一步一步实现它吧，首先是Header区域。

请看代码1：

 body{  font-family: Arial, Helvetica, sans-serif;  margin: 0;  padding: 0;  }  #header  {  height: 70px;   margin: 20px 30px;  padding: 0;  border: 1px solid #ccc;  }

关键的代码只有一行，我已经标出。

现在有一个问题了，如果Header的内容也比较丰富，可能Logo + Banner的总宽度为1000px了，但有些小屏幕却看不完整，这时我们得为这个Header 加个最小宽度限制。在IE 7 +和W3C浏览器中，拥有一个min-width属性可以实现这个效果，但是IE6不支持(参照各版本IE浏览器CSS兼容性列表)。不过css expression可以帮我们解决这个问题，请看代码2：

    Header自适应  body{  font-family: Arial, Helvetica, sans-serif;  margin: 0;  padding: 0;  }  #header  {  /* IE6 不支持min-width属性，但是IE7+和W3C支持 */  min-width:1000px;  /* 用CSS表达式让IE6也支持最小宽度 */  _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":"");  height: 70px;   padding-left: 30px;  padding-right: 30px;  }  #header_content{  width: 100%;  border: 1px solid #ccc;  height: 100%;  }

body{ font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } #header { /* IE6 不支持min-width属性，但是IE7+和W3C支持 */ min-width:1000px; /* 用CSS表达式让IE6也支持最小宽度 */ _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":""); height: 70px; padding-left: 30px; padding-right: 30px; } #header_content{ width: 100%; border: 1px solid #ccc; height: 100%; } #main{ /* IE6 不支持min-width属性，但是IE7+和W3C支持 */ min-width:1000px; /* 用CSS表达式让IE6也支持最小宽度 */ _width:expression((document.documentElement.clientWidth||document.body.clientWidth)<1000?"1000px":""); height: 70px; padding-left: 30px; padding-right: 30px; margin-top: 20px; } #left{ border: 1px solid #ccc; float: left; vertical-align:middle; text-align:center; width: 200px; } #right{ border: 1px solid #ccc; float: right; position: absolute; left: 240px; right: 30px; min-width: 790px; vertical-align:middle; text-align:center; overflow: hidden; }

Left

Right

View Code

"text/css">
body {
     margin:0;
     padding: 0;
}
#container {
     /* IE6 不支持min-width属性，但是IE7+和W3C支持 */
     min-width:1000px;
     /* 用CSS表达式让IE6也支持最小宽度 */
     _width:expression((document.documentelement.clientwidth||document.body.clientwidth)<1000?"1000px":"");
     margin: 0 auto;
}
#header {
     /* IE6 不支持min-width属性，但是IE7+和W3C支持 */
     min-width:940px;
     height: 70px;
     padding-left: 30px;
     padding-right: 30px;
}
/* Header Content的实际宽度已经为1002px了 */
#header_content {
     width: 100%;
     border: 1px solid #ccc;
     height: 100%;
}
#main {
     padding-left:30px;
     padding-right: 30px;
     margin-top: 10px;
}
#main_content {
     width: 100%;
}
#left {
     border: 1px solid #ccc;
     width: 200px;
     float: left;
}
#right {
     border: 1px solid #ccc;
     float: right;
     min-width:700px;
}

"text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
"text/javascript">
     $(document).ready(function(){
             //调用函数
             var pagestyle = function() {
                 var right = $("#right");
                 // 请注意这个3减去300的实际算法
                 var w  = $(window).width() - 300;
                 if(w < 700){
                     w   = 700;
                 }
                 right.width(w);
             }
             // 窗体加载时自适应宽度
             pagestyle();
             // 注册窗体改变大小事件
             $(window).resize(pagestyle);
     });


"container">
   "header">
     "header_content"> "http://images.cnblogs.com/logo_small.gif" alt="">

   "main">
     "left">

Left

     "width: 1049px; " id="right">

大橙子网站建设，新征程启航

Web布局中的宽高自适应有哪些

Left

Right

Left

Right

其他资讯