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

CSS样式表
50个强大璀璨的CSS3/JS技术运用实例
table建站,XHTML建站和DIV建站的不同
根据W3C的CSS3草案翻译的CSS3参考手册
RoundedCornr:生成圆角图片的好用的简单工具
CSS教程:彻底了解haslayout
CSS3的简单又实用的3个属性
CSS教程:-moz-inline-box和-moz-inline-stack
css3阴影属性box-shadow注意事项
css3文本阴影属性text-shadow说明
CSS3的border-radius(圆角)
border边框属性在浏览器中的渲染方式
CSS属性:text-shadow,box-shadow,border-radius
再论清除浮动的空DIV方法
YUI网页布局:自适应宽度的输入框
学习web标准:Web标准中的特殊字符
优化浏览器渲染:将样式表放在页面顶部
优化浏览器渲染:指定图片尺寸
优化浏览器渲染:避免CSS expressions
CSS3 Please:在线生成跨浏览器的CSS3代码
CSS实例教程:制作漂亮的网页表单

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-11   浏览: 89 ::
收藏到网摘: 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>