上中下三栏自适应100%高度

上中下三栏自适应100%高度

上中下三栏自适应100%高度,这是一个比较特色并且非常适用的页面布局代码,对于一些展示图片或者代码的页面非常适用。

<?xml version=”1.0″ encoding=”gb2312″?><!DOCTYPE html PUBLIC “-//W3C</a>//DTD XHTML</a> 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /><style type=”text/css”>*{ margin:0; padding:0;}html{ padding:0 !important; padding:100px 0; width:100%; height:100%; overflow:hidden;}body{ padding:0!important; padding:100px 0; height:100%; overflow:hidden;}#header{ position:absolute; top:0; width:100%; height:100px; background:#ccc; line-height:100px; text-align:center;}#middle{ position: absolute!important; position: relative; top:100px!important; top:0; bottom:100px; width:100%; height:auto!important; height:100%; background:#ffc; text-align:center; overflow: auto;}#footer{ position:absolute; bottom:0; width:100%; height:100px; background:#ccc; line-height:100px; text-align:center;}</style><title>自适应100%高度</title></head><body leftmargin=”0″ topmargin=”0″ scroll=”no”><div id=”header”>页首</div><div id=”middle”>页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br />页中<br /></div><div id=”footer”>页脚</div></body></html>

提示:您可以先修改部分代码再运行

需要注意的是代码头部的以下部份不能去除

<?xml version=”1.0″ encoding=”gb2312″?>

上中下三栏自适应100%高度

相关文章:

你感兴趣的文章:

标签云: