新手提问,如何设HTML里面表格高度为100% ,即自适应浏览器高度 - HTML/CSS当前位置:& &&&新手提问,如何设HTML里面表格高度为100% ,即自适应新手提问,如何设HTML里面表格高度为100% ,即自适应浏览器高度&&网友分享于：&&浏览：362次新手提问,怎么设HTML里面表格高度为100% ,即自适应浏览器高度如题------解决方案-------------------- &body style= &height:100%; width:100%; margin:0 &&
&table width= &100% & height= &100% & border= &1 & cellspacing= &0 & cellpadding= &0 &&
&td& & &/td&
&td& & &/td&
&td& & &/td&
&td& & &/td&
------解决方案-------------------- &!DOCTYPE html PUBLIC
&-//W3C//DTD XHTML 1.0 Strict//EN &
&http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd &&
&meta http-equiv= &Content-Type & content= &text/ charset=gb2312 & /&
&title& test &/title&
&body style= &height:100%; margin:0; &&
&table width= &100% & height= &100% & cellspacing= &0 & cellpadding= &0 &&
&td height= &100% &&
&table width= &100% & height= &100% & border= &1 & cellspacing= &0 & cellpadding= &0 &&
&td& test &/td&
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有js 获取浏览器高度和宽度值(多浏览器)
字体：[ ] 类型：转载 时间：
js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
&IE中： document.body.clientWidth ==& BODY对象宽度 document.body.clientHeight ==& BODY对象高度 document.documentElement.clientWidth ==& 可见区域宽度 document.documentElement.clientHeight ==& 可见区域高度 FireFox中： document.body.clientWidth ==& BODY对象宽度 document.body.clientHeight ==& BODY对象高度 document.documentElement.clientWidth ==& 可见区域宽度 document.documentElement.clientHeight ==& 可见区域高度 Opera中： document.body.clientWidth ==& 可见区域宽度 document.body.clientHeight ==& 可见区域高度 document.documentElement.clientWidth ==& 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==& 页面对象高度（即BODY对象高度加上Margin高） 没有定义W3C的标准，则 IE为： document.documentElement.clientWidth ==& 0 document.documentElement.clientHeight ==& 0 FireFox为： document.documentElement.clientWidth ==& 页面对象宽度（即BODY对象宽度加上Margin宽) document.documentElement.clientHeight ==& 页面对象高度（即BODY对象高度加上Margin高） Opera为： document.documentElement.clientWidth ==& 页面对象宽度（即BODY对象宽度加上Margin宽） document.documentElement.clientHeight ==& 页面对象高度（即BODY对象高度加上Margin高） 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth 网页正文全文高： document.body.scrollHeight 网页被卷去的高： document.body.scrollTop 网页被卷去的左： document.body.scrollLeft 网页正文部分上： window.screenTop 网页正文部分左： window.screenLeft 屏幕分辨率的高： window.screen.height 屏幕分辨率的宽： window.screen.width 屏幕可用工作区高度： window.screen.availHeight 屏幕可用工作区宽度： window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量 实现代码
代码如下: & !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& &title&请调整浏览器窗口&/title& &meta http-equiv="content-type" content="text/ charset=gb2312"& &/meta&&/head& &body& &h2 align="center"&请调整浏览器窗口大小&/h2&&hr /& &form action="#" method="get" name="form1" id="form1"& &!--显示浏览器窗口的实际尺寸--& 浏览器窗口 的 实际高度: &input type="text" name="availHeight" size="4"/&&br /& 浏览器窗口 的 实际宽度: &input type="text" name="availWidth" size="4"/&&br /& &/form& &script type="text/javascript"& &!-- var winWidth = 0; var winHeight = 0; function findDimensions() //函数：获取尺寸 { //获取窗口宽度 if (window.innerWidth) winWidth = window.innerW else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientW //获取窗口高度 if (window.innerHeight) winHeight = window.innerH else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientH //通过深入Document内部对body进行检测，获取窗口大小 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) { winHeight = document.documentElement.clientH winWidth = document.documentElement.clientW } //结果输出至两个文本框 document.form1.availHeight.value= winH document.form1.availWidth.value= winW } findDimensions(); //调用函数，获取数值 window.onresize=findD //--& &/script& &/body& &/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具js/jquery获取浏览器窗口的可视区域高度和宽度,滚动条高度-js教程-网页制作-壹聚教程网js/jquery获取浏览器窗口的可视区域高度和宽度,滚动条高度
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。
IE中，浏览器显示窗口大小只能以下获取：
document.body.offsetWidth
document.body.offsetHeight
在声明了DOCTYPE的浏览器中，可以用以下来获取浏览器显示窗口大小：
document.documentElement.clientWidth
document.documentElement.clientHeight
IE，FF，Safari皆支持该方法，opera虽支持该属性，但是返回的是页面尺寸；
同时，除了IE以外的所有浏览器都将此信息保存在window对象中，可以用以下获取：
window.innerWidth
window.innerHeight
整个网页尺寸一般获得方法
document.body.scrollWidth
document.body.scrollHeight
屏幕分辨率高度一般获得方法
window.screen.height
window.screen.width
总结一下实例
function getViewSizeWithoutScrollbar(){//不包含滚动条
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
function getViewSizeWithScrollbar(){//包含滚动条
if(window.innerWidth){
width : window.innerWidth,
height: window.innerHeight
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
width : document.documentElement.clientWidth + getScrollWith(),
height: document.documentElement.clientHeight + getScrollWith()
IE，FireFox 差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
另附个人最常用的获取整页宽高的方法（需要jquery框架）
$(document).width() & $('body').width() ? $(document).width() : $('body').width();
$(document).height() & $('body').height() ? $(document).height() : $('body').height();
alert($(window).height()); //浏览器时下窗口可视区域高度
alert($(document).height()); //浏览器时下窗口文档的高度
alert($(document.body).height());//浏览器时下窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器时下窗口文档body的总高度 包括border padding margin
alert($(window).width()); //浏览器时下窗口可视区域宽度
alert($(document).width());//浏览器时下窗口文档对于象宽度
alert($(document.body).width());//浏览器时下窗口文档body的高度
alert($(document.body).outerWidth(true));//浏览器时下窗口文档body的总宽度 包括border padding margin
alert($(document).scrollTop()); //获取滚动条到顶部的垂直高度
alert($(document).scrollLeft()); //获取滚动条到左边的垂直宽度
上一页： &&&&&下一页：相关内容对tbody设置高度时，IE浏览器显示每行都是tbody的高度_css吧_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：40,933贴子：
对tbody设置高度时，IE浏览器显示每行都是tbody的高度收藏
为了检索结果过多可以滚动的效果，在table中对tbody进行高度设置。呈现的效果在火狐，谷歌浏览器都没有问题，唯独在IE中(IE版本是11)，本来应该是tbody的高度变成了检索结果每行都这么高，请问大家有没有遇到类似的问题？有什么解决办法另:网上看见不少两个table实现的方式，但是需求只能够把结果放在一个tale中。
创维OLED-S9D
还有，我做的静态页面显示正常，但是到了tomcat启动的时候，就出现这个问题。
登录百度帐号推荐应用
为兴趣而生，贴吧更懂你。或jQuery 获取浏览器窗口可视区域的高度和宽度及滚动条高度 | 前端笔记