_posts/2013-03-10-CSS-adapt-width-and-height.md

   1 ---
   2 layout: post
   3 title: "关于CSS解决高度自适应和宽度自适应的问题"
   4 date: 2013-03-10 19:09
   5 comments: true
   6 tags: [CSS, ZT]
   7 ---
   8
   9 今天在做一个地图的web应用,这是个大坑...首先开始设计首页,于是开始山寨谷歌地图了 =.=
  10 设计出来基本的div框架之后,想做到地图界面宽度和高度自动适应浏览器.之前做网站
  11 的需求都是固定宽度和高度的.于是我变开始折腾了.
  12
  13 #自适应宽度
  14 自适应宽度的难处在于网页里有超过两个并列的div,如果两列都是变宽的话就直接按比例设置
  15 就好了,关键在于1列需要固定宽度另外一列需要自适应.我遇到的就是后者,具体情况是第一列需
  16 要固定宽度350px,第二列的宽度是100%-350px,最简单的方法是设置第二列的宽度是width: -webkit-calc(100% - 350px);
  17 但是这个方法的适用性不太好,由于我用的Archlinux,也不好测试IE是否支持,估计是不可能支持的吧.
  18 另外一个方法是设置第一个div的属性为float:left;这样第一列的div就脱离整个文档流,第二个div直接
  19 设置margin-left: 350px;即可.
  20
  21 #自适应高度
  22 自适应高度遇到的问题也是上面有一个固定高度为142px的div,下面的div的高度为100%-142px.
  23 同样可以设置高度为height: -webkit-calc(100% - 142px);
  24 另外一种方法是把div设置成 position: absolute;脱离文档流,然后设置top:142px; bottom:0px;即可
  25 另外附上截图:
  26 ![https://lh6.googleusercontent.com/-9ChxAWRUJgg/UTxvXThY7dI/AAAAAAAARAw/Y3huY7wxMc8/s918/2013-03-10-193136_1366x768_scrot.png](/assets/images/2013/2013-03-10-193136_1366x768_scrot.png)
  27 ![https://lh3.googleusercontent.com/-kIjIH-kxSGo/UTxvXEI2L-I/AAAAAAAARA4/UP_MerAyvSE/s918/2013-03-10-193130_1366x768_scrot.png](/assets/images/2013/2013-03-10-193130_1366x768_scrot.png)