当前位置：首页 → 问答吧 → 全屏布局

全屏布局

时间：2010-11-01

来源：互联网

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <table cellpadding="0" cellspacing="0" align="center" height="100%" width="100%"> <tr> <td align="center" height="122px" bgcolor="#666"> header </td> </tr> <tr> <td height="100%" width="100%" align="center" bgcolor="#CCCCCC"> content </td> </tr> <tr> <td align="center" height="60px" bgcolor="#333"> footer </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行

如何改成div+css布局呢......header footer 固定高度 content高度适应全屏.......

作者: zqq1988 发布时间: 2010-11-01

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body style="margin:0; padding:0;"> <div style="width:100%; background:#ccc; height:auto; overflow:auto;"> <div style="height:100px; width:100%; position:absolute; top:0; background:#333;"></div> <div style="margin:100px 0 200px 0; background:#999; position:fixed; height:100%; width:100%; text-align:center;"> <p>内容区域</p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> <p> </p> </div> <div style="height:200px; width:100%; position:absolute; bottom:0; background:#666;"></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: ChinaUx 发布时间: 2010-11-01

全屏布局

热门阅读

热门下载