Tip: you can modify some code before running
<!-- Put IE into quirks mode --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><ptml xmlns="http://www.w3.org/1999/xhtml"><pead><meta http-equiv="content-type" content="text/html; charset=gb2312"/><title>Adaptive full screen layout-</title><style type="text/css">Html {height: 100%; max-height: 100%; padding: 0; margin: 0; border: 0; background: # fff; font-size: 76%; font-family: georgia, palatino linotype, times new roman, serif, "Ino";/* hide overflow: hidden from IE5/Mac * // */overflow: hidden; /**/} html {scrollbar-face-color: orange; scrollbar-highlight-color: # fff; scrollbar-shadow-color: # c00; scrollbar-3dlight-color: # c00; scrollbar-arrow-color: #000; scrollbar-track-color: # c0c0c0; scrollbar-darkshadow-color: # fff ;}body {height: 100%; max-height: 100%; overflow: hidden; padding: 0; margin: 0; border: 0 ;}# content {overflow: auto; position: absolute; z-index: 3; top: 100px; width: 96%; bottom: 80px; left: 2%; background: #666;} * html # content {top: 0; left: 2%; height: 100%; max-height: 100%; width: 96%; overflow: auto; position: absolute; z-index: 3; border-top: 100px solid # fff; border-bottom: 80px solid # fff ;} # head {position: absolute; margin: 0; top: 0; left: 1px; display: block; width: 100%; height: 90px; background: orange; background-position: 0 0; background-repeat: no-repeat; font-size: 4em; z-index: 5; overflow: hidden; color: # fff; border-bottom: 1px # c0c0c0 solid; text-align: center ;}# foot {position: absolute; margin: 0; bottom: 0; left: 2%; display: block; width: 96%; height: 70px; font-size: 1em; z-index: 5; overflow: hidden; color: # fff; text-align: center ;}# content p, h2 {padding: 10px; font-size: 12px; color: # fff ;}# content p. bold {font-size: 1.2em; font-weight: bold; color: red ;}# logo {height: 75px; line-height: 75px; text-align: center; display: block ;}. footleft {width: 20%; height: 70px; line-height: 70px; float: left; border: 1px # c0c0c0 solid; background: blue ;}. footmid {width: 58%; height: 70px; line-height: 70px; margin-left: 1%; float: left; border: 1px # c0c0c0 solid; background: blue ;}. footright {width: 20%; height: 70px; line-height: 70px; float: right; border: 1px # c0c0c0 solid; background: blue;} a: link,: visited {color: # fff ;}</style></pead><body><div id="head">100% height full screen adaptive layout</div><div id="foot"><div class="footleft">Ice Peak</div><div class="footmid">Ice Peak</div><div class="footright">Ice Peak</div></div><div id="content"> <p>The only regret of this layout is that it is displayed as a strange mode in IE6 or earlier browsers, because a comment is added to the header of the HTML code. If the height of the scroll bar in IE is not displayed after deletion.</p> <p class="bold">This layout was tested in the following browsers: IE5.5, IE6, IE7, TT, Opera 9.63, Firefox3.0, Google, and IE8.</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> </p> <p> </p> <p> </p> <p> </p></div></body></ptml>
Tip: you can modify some code before running
