当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 网页自动满屏实现代码

CSS样式表
CSS教程:dl dt dd模拟表格实例
网页制作实例:将PSD网站模板转换为XHTML+CSS网页
CSS布局实例代码:两列布局实例
border:none;与border:0;的区别
CSS浮动定位:引起文本重影的怪异问题
同一张PNG8图片为何部份图标在IE6中消失
IE6中背景属性加a与a:hover问题
网页制作教程:在IE7中的网页文本重影问题
推动浏览器更新的原因和方法
CSS实例教程:制作网页列表菜单
CSS实例教程:制作网站横向导航
CSS实例教程:制作网页2级导航
CSS研究教程:类名的长命名和短命名
CSS教程:彻底弄清楚CSS的行高属性
用CSS的float和clear属性进行三栏网页布局
没有JS只用CSS制作的网页下拉菜单
初学CSS的基础教程:在网页中使用CSS
网页制作教程:制作拖拽翻页
制作网页时编写CSS代码的25个小技巧
CSS3中很有用的特性:CSS阴影

CSS样式表 中的 网页自动满屏实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 103 ::
收藏到网摘: n/a

<!-- /* Font Definitions */ @font-face {font-family:宋体; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-alt:SimSun; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"Cambria Math"; panose-1:2 4 5 3 5 4 6 3 2 4; mso-font-charset:1; mso-generic-font-family:roman; mso-font-format:other; mso-font-pitch:variable; mso-font-signature:0 0 0 0 0 0;} @font-face {font-family:Calibri; panose-1:2 15 5 2 2 2 4 3 2 4; mso-font-charset:0; mso-generic-font-family:swiss; mso-font-pitch:variable; mso-font-signature:-1610611985 1073750139 0 0 159 0;} @font-face {font-family:新宋体; panose-1:2 1 6 9 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"\@宋体"; panose-1:2 1 6 0 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:auto; mso-font-pitch:variable; mso-font-signature:3 135135232 16 0 262145 0;} @font-face {font-family:"\@新宋体"; panose-1:2 1 6 9 3 1 1 1 1 1; mso-font-charset:134; mso-generic-font-family:modern; mso-font-pitch:fixed; mso-font-signature:3 135135232 16 0 262145 0;} /* Style Definitions */ p.MsoNormal, li.MsoNormal, div.MsoNormal {mso-style-unhide:no; mso-style-qformat:yes; mso-style-parent:""; margin:0cm; margin-bottom:.0001pt; mso-para-margin-top:0cm; mso-para-margin-right:0cm; mso-para-margin-bottom:.5gd; mso-para-margin-left:0cm; mso-para-margin-bottom:.0001pt; text-align:justify; text-justify:inter-ideograph; text-indent:10.0pt; mso-char-indent-count:2.0; mso-pagination:none; font-size:12.0pt; font-family:"Calibri","sans-serif"; mso-ascii-font-family:Calibri; mso-ascii-theme-font:minor-latin; mso-fareast-font-family:宋体; mso-fareast-theme-font:minor-fareast; mso-hansi-font-family:Calibri; mso-hansi-theme-font:minor-latin; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi; mso-font-kerning:1.0pt;} .MsoChpDefault {mso-style-type:export-only; mso-default-props:yes; font-size:12.0pt; mso-ansi-font-size:12.0pt; mso-bidi-font-size:12.0pt; mso-bidi-font-family:"Times New Roman"; mso-bidi-theme-font:minor-bidi;} .MsoPapDefault {mso-style-type:export-only; margin-bottom:0cm; margin-bottom:.0001pt; mso-para-margin-bottom:.5gd; mso-para-margin-bottom:.0001pt; text-align:center; text-indent:10.0pt; mso-char-indent-count:2.0;} /* Page Definitions */ @page {mso-page-border-surround-header:no; mso-page-border-surround-footer:no;} @page Section1 {size:595.3pt 841.9pt; margin:72.0pt 90.0pt 72.0pt 90.0pt; mso-header-margin:42.55pt; mso-footer-margin:49.6pt; mso-paper-source:0; layout-grid:15.6pt;} div.Section1 {page:Section1;} -->
网页自动满屏
以前可以搞个<table>,然后设它的height=”100%”,这样整个表格就充满了页面,再将内容放在这表格内,搞定。可是不知从什么时候开始,突然发现这个属性失效了。
跟头部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
这句有点儿关系。去掉也可以自动满屏,窗口有多大,window.document.body.offsetHeight就有多大。
保留这个头部,稍加变通,也可以满屏。
方法是在最外层加个DIV,如下:
<div id="divTest" style="width:100%;height:100%;position:absolute;">
注意这个;position:absolute; 一定要有,否则也不起作用。这个DIV就作为整个页面的容器。
<!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">
<body onload="LoadTabPage();">
<div id="divTest" style="width:100%;height:100%;position:absolute;">
……
</div>
</body> </html>