页面头部和底部固定
说明：设置body的padding属性padding-top:16px;padding-bottom:16px，使页面上下留有16px的空白。然后设置#header和#footer的绝对位置和高度。设置#content的overflow:auto。试着改变这几个参数，一用就明白<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html><head><title></title><meta name="generator" content="editplus"><meta name="author" content="ariex"><meta name="keywords" content=""><meta name="description" content=""><style type="text/css">body{margin:0px;padding:0px;overflow:hidden;padding-top:16px;padding-bottom:16px;}div{margin:0px;padding:0px;}#header{background-color:#D3D3D3;color:white;position:absolute;top:0px;left:0px;height:16px;width:100%;}#content{background-color:#EFF7FF;width:100%;height:100%;overflow:auto}#footer{background-color:#FFDD99;color:white;width:100%;height:16px;position:absolute;bottom:0px;left:0px;}</style><script language="javascript"></script></head><body><div id="header">header</div><div id="content"><script language="javascript">for(i=0;i<1000;i++){document.write(i+"<br />");}</script></div><div id="footer">footer</div></body></html>
========================================================================
2010-1-15
动态修改头部和底部的属性
<!doctype html public "-//w3c//dtd html 4.0 transitional//en"><html> <head><title>页面全屏布局</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style type="text/css">body{margin:0px;padding:0px;overflow:hidden;padding-top:16px;padding-bottom:16px;}div{margin:0px;padding:0px;}#header{background-color:#D3D3D3;color:white;position:absolute;top:0px;left:0px;height:16px;width:100%;}#content{background-color:#EFF7FF;width:100%;height:100%;overflow:auto}#footer{background-color:#FFDD99;color:white;width:100%;height:16px;position:absolute;bottom:0px;left:0px;}</style><script type="text/javascript">var bodyObj;var headerObj;var contentObj;var footerObj;function init(){var innerStr = "";for(i=0;i<100;i++){innerStr = innerStr + i+"<br />";}bodyObj = document.body;headerObj = document.getElementById("header");contentObj = document.getElementById("content");footerObj = document.getElementById("footer");contentObj.innerHTML = innerStr;}function changeHeader(){bodyObj.style.paddingTop = "80px";headerObj.style.height = 80+"px";}function resetHeader(){bodyObj.style.paddingTop = "16px";headerObj.style.height = 16+"px";}function changeFooter(){bodyObj.style.paddingBottom = "100px";footerObj.style.height = 100+"px";}function resetFooter(){bodyObj.style.paddingBottom = "16px";footerObj.style.height = 16+"px";}</script></head><body ><div id="header"><span style="float:right;"><button >改变头部</button><button >重置头部</button><button >改变底部</button><button >重置底部</button></span>header</div><div id="content"></div><div id="footer">footer</div></body></html>
CSS Top and Bottom Frames Layout.html
符合W3C的商中下布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html style="overflow:hidden;_overflow:hidden;" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Dynamic Drive: CSS Top and Bottom Frames Layout</title><style type="text/css">body{margin: 0;padding: 0;border: 0;overflow: hidden;height: 100%; max-height: 100%; }#framecontentTop, #framecontentBottom{position: absolute; top: 0; left: 0; width: 100%; height: 130px; /*Height of top frame div*/overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/background-color: navy;color: white;}#framecontentBottom{top: auto;bottom: 0; height: 110px; /*Height of bottom frame div*/overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/background-color: navy;color: white;}#maincontent{position: fixed; top: 130px; /*Set top value to HeightOfTopFrameDiv*/left: 0;right: 0;bottom: 110px; /*Set bottom value to HeightOfBottomFrameDiv*/overflow: auto; background: #fff;}.innertube{margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/}* html body{ /*IE6 hack*/padding: 130px 0 110px 0; /*Set value to (HeightOfTopFrameDiv 0 HeightOfBottomFrameDiv 0)*/}* html #maincontent{ /*IE6 hack*/height: 100%; width: 100%; }</style><script type="text/javascript">/*** Temporary text filler function. Remove when deploying template. ***/var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]function filltext(words){for (var i=0; i<words; i++)document.write(gibberish+" ")}</script></head><body><div id="framecontentTop"><div class="innertube"><h1>CSS Top and Bottom Frames Layout</h1><h3>Sample text here</h3></div></div><div id="framecontentBottom"><div class="innertube"><h3>Sample text here</h3></div></div><div id="maincontent"><div class="innertube"><h1>Dynamic Drive CSS Library</h1><p><script type="text/javascript">filltext(255)</script></p><p style="text-align: center">Credits: <a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></p></div></div></body></html>
页:
[1]