当html的文档类型为<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的时候,设置table或div的height=100%不能达到预想的效果,今天参考了达人的文章(出处忘了。。),把代码粘下来备忘~~~
LayoutTest.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="LayoutTest.aspx.cs" Inherits="LayoutTest"%> <!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> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Untitled</title> <style type="text/css" media="screen"> html, body {}{ height: 100%; margin: 0; padding: 0;} body {}{font: 14px arial, sans-serif;} p {}{margin: 1em 0;} #row1 {}{background: #abc; height: 100px;} #row2 {}{background: #fff; height: 3em;} #row3 {}{ background: #ffc; position: absolute; margin-top: 100px;/**//* header height */ top: 3em;/**//* menu height */ bottom: 9%;/**//* footer height */ left: 0; right: 0;/**//* right not read by IE6 and below so width needs set */ overflow: auto; } #row4 {}{ background: #abc; height: 9%; position: absolute; bottom: 0; width: 100%; } </style> <!--[if lt IE 7]> <style type="text/css" media="screen"> /* height DHTML expression for IE6 and below */ #row3 { width: 100%; /* calculation = the height of the body and subtract the other 3 rows */ height:expression(document.body.clientHeight - row1.offsetHeight - row2.offsetHeight - row4.offsetHeight + "px"); } </style> <![endif]--> </head> <body> <div id="row1">Header</div> <div id="row2">Menu</div> <div id="row3"> Content.. add favourite foo text here</div> <div id="row4">Footer</div> </body> </html>
posted on
2007-09-18 14:57Rain_Ray
阅读(490)
评论(0)
收藏举报