标签：
1、如何实现页面的宽高自适应浏览器的变化，且有一个最小宽和高
3 <head> 4 <meta charset = "utf-8"> 5 <title>个人任务管理系统</title>
<style>
body {width: 100%; height 100%; min-width: 800px; min-height: 500px;}
header {height: 50px;}
#container {min-height: 450px; position: absolute; top: 50px;
bottom: 0;}
#right {min-width: 800px; width 100%; height: 100%; float: left;
padding-left: 400px; box-sizing: border-box; }
#left {width: 400px; height 100%; flaot: left; box-sizing: border-box;
margin-left: -100%;}
</style>
6 </head> 7 <body> 8 9 <header> 10 header 11 </header> 12 13 <div id="container"> 14 <div id="right">right</div> 15 <div id="left">left</div> 16 </div> 17 18 </body> 19 </html>
难点一：就是header部分是固定高度，如果不是固定高度，可采用百分比，实现过程就这么复杂了。采用百分比的问题是当浏览器很高时，header部分也太高了。
难点二：container部分采用绝对布局方式空出了header占用的空间，这时他的高度想要跟随浏览器的高度，不能采用百分比的方法了，因为你不知道该值是多少，这里巧妙地采用了bottom的值为0的技巧，使得container的高度充满了浏览器，同时要设置好最低高度。要不然，但浏览器高度过低时，底部布局出现问题。
难点三：left和right部分的布局看起来是常见的一列固定(left)，一列自适应(right)的布局。但是这里他们的父元素，也就是它们的包含块没有确定的宽度值。这里的解决办法是采用了margin为负值的技巧，并且要设置right部分的最小宽度值。要不然，但浏览器变窄时，右边会留空白，出问题。
实现百度IFE2015Spring的任务Task3的几个问题和解决办法
标签：
原文地址：http://www.cnblogs.com/TwoWaterLee/p/5289926.html
