<!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%，自适应窗口宽度</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;} h3{ font-size:18px; } p{ padding:20px; } #header{ width:100%; background:#003300;} #content{ width:100%; background:#fff; color: #003300; } #footer{ width:100%; background:#FF6600} div { color: #FFFFFF; margin: 0px; padding: 10px; font: 12px Verdana, Arial, Helvetica, sans-serif; } </style> </head> <body> <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色加以区分 </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> </body> </html>