right是无法只适应填满剩余的高度和宽度的，必须设定right的高度，让right的高度大于left的的高度。
<style>
#main{
width:100%
height:60px
float:left
background:#0F0
}
#left{
height:50px
width:200px
background:#90F
float:left
}
#right{
width:100%
background:#FF0
height:200px
}
</style>
</head>
<body>
<div id="main"></div>
<div id="left">222222222222</div>
<div id="right">11111111111111</div>
</body>
</html>
拉伸是可以做的,需要用到另外一个属性:css中设置背景图拉伸填充，在css2.1之前这个背景的长宽值是不能被修改的。 实际的结果是只能重复显示，可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景图片的显示。所以一般用作背景图片的有2类：
1.是一整张大图，尺寸和区域大小刚好吻合
2.一个很小的条状图，通过repeat后，形成一个很规则的大图背景。
css3出现以后，可以用background-size 属性来实现背景图拉伸填充。 而且这个属性在firefox，chrome，以及ie9上都可以使用。
具体使用方法如下：
背景图尺寸（数值表示方式）：
#background-size{ background-size:200px 100px}
背景图尺寸（百分比表示方式）：
#background-size{ background-size:30% 60%}
背景图尺寸（等比扩展图片来填满元素，即cover值）：
#background-size{background-size:cover}
背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）：
#background-size{ background-size:contain}
背景图尺寸（以图片自身大小来填充元素，即auto值）：
#background-size{ background-size:auto}
在一个div里面设置两张背景图片用css3的多背景可以做到，写法也很容易，类似下面这样就行了:background:url(top.jpg)
center
top
no-repeat,
url(bottom.jpg)
center
bottom
no-repeat
不过因为不同浏览器对于css3的支持度有限，这种写法在大多数浏览器里面，特别是ie里面是无效的。所以通常的作法还是嵌套两个div，一个div里面是上面的背景图，一个div里面是下面的背景图，这样的兼容性会好一些。
