剩余宽度、剩余高度

作者：vkvi 来源：ITPOW（原创）日期：2013-6-8

计算机屏幕分辨率大小不一，如何让两个 div 的第一个占了 100px 的宽度，或者高度，另一个 div 把剩余的宽度，或者剩余的高度占满呢？而且不管浏览器如何缩放，都是自动宽度，或者高度。

其实利用 position:absolute 的 left、top 可以决定第二个 div 的开始位置，再通过 right、bottom 决定剩余宽度，或者剩余高度。

剩余宽度示例

<style type="text/css">
html, body { margin:0px; padding:0px; width:100%; height:100%; }
</style>

<div style="position:absolute; left:0px; top:0px; width:100px; height:100%; background:green;"></div>
<div style="position:absolute; left:100px; top:0px; right:0px; height:100%; background:red;"></div>

剩余高度示例

<style type="text/css">
html, body { margin:0px; padding:0px; width:100%; height:100%; }
</style>

<div style="position:absolute; left:0px; top:0px; width:100%; height:100px; background:green;"></div>
<div style="position:absolute; left:0px; top:100px; bottom:0px; width:100%; background:red;"></div>

在 IE 中没有效果？

不怕，你一定是忘了在 HTML 头头上加上如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

其实标准的做法，我们都应该加上 <!DOCTYPE。

然后你还可以把剩余宽度、剩余高度配合一下，做出一 banner、一侧边栏、一工作区的效果来。

电邮：cftea@126.com