<!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"> <head> <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>CSS布局:三行一列 - 宽度100%，最小定宽780px</title> <script type="text/javascript"> function AddText(id){ getText = document.getElementById(id).innerHTML; document.getElementById(id).innerHTML = getText+"测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的测试用的"; } </script> <style type="text/css"> *,html,body{margin:0;padding:0;} body{ background:#F0DFDB; font-size:14px; } #wrap{min-width:780px; width:expression(document.body.clientWidth*0.99<780?"780px":"100%");} h3{ font-size:18px; } p{ padding:20px; } #header{ width:100%; background:#A94E38; color:#F0DFDB;} #content{ width:100%; background:#fff } #footer{ width:100%; background:#7082C2; color:#fff } </style> </head> <body> <div id="wrap"> <div id="header"> <h3>#header</h3> <p>{ width:100%; background:#A94E38; color:#F0DFDB} 高度自动,宽度100% 提示：先去掉body的初始样式 *,html,body{margin:0;padding:0;}</p> </div> <div id="content"> <h3>#content</h3> <p> #content{ width:100%; background:#fff} 只是定义了宽度为100%,背景为白色与body色加以区分 这个布局中我们使用了min-width:780px来限制最小宽度，对于IE浏览器我们则使用了js: width:expression(document.body.clientWidth*0.99<780?"780px":"100%"); 意思就是当文档的body在客户端显示宽度小于780px的时候就把width值固定为780px，当超过这个值就把width值设置为100%宽。 </p> <a href="javascript:AddText('content')" _fcksavedurl="javascript:AddText('content')">加点文字</a> </div> <div id="footer"> <h3>#footer</h3> <p>#footer{ width:100%; background:#7082C2; color:#fff }</p> </div> </div> </body> </html>