如何让表(HTML)充满页面

如何让表(HTML)充满页面,第1张

宽度可设置为100%,高度需要JavaScript控制,在ie下预览下面代码d出小黄条的时候点击允许.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">

<html xmlns="">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

padding:0

margin:0

}

table tr td{

border:solid 1px red

}

</style>

<script type="text/javascript">

var geometry={}

if(window.innerWidth){

geometry.getViewportWidth=function(){

return window.innerWidth

}

geometry.getViewportHeight=function(){

return window.innerHeight

}

}else if(document.documentElement &&document.documentElement.clientWidth){

geometry.getViewportWidth=function(){

return document.documentElement.clientWidth

}

geometry.getViewportHeight=function(){

return document.documentElement.clientHeight

}

}else if(document.body.clientWidth){

geometry.getViewportWidth=function(){

return document.body.clientWidth

}

geometry.getViewportHeight=function(){

return document.body.clientHeight

}

}

function change(){

document.getElementById('test').style.height=geometry.getViewportHeight()+'px'

}

window.onload=function(){

change()

window.onresize=function(){

change()

}

}

</script>

</head>

<body>

<table width="100%" cellpadding="0" cellspacing="0" id="test">

<tbody>

<tr><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td></tr>

<tr><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td></tr>

<tr><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td></tr>

<tr><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td><td>dddd</td></tr>

</tbody>

</table>

</body>

</html>

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width:控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。

height:和 width 相对应,指定高度。

initial-scale:初始缩放比例,也即是当页面第一次 load 的时候缩放比例。

maximum-scale:允许用户缩放到的最大比例。

minimum-scale:允许用户缩放到的最小比例。

user-scalable:用户是否可以手动缩放

你用js来控制就行了

先获取屏幕的宽 然后减去你的页面宽 然后再除以二就行

屏幕宽度:screen.width

我用一个div来演示了:

<div id="div"></div>

<script>

function centers(){

var divs = document.getElementById("div")

document.getElementById("div").style.marginLeft = (screen.width -divs.offsetWidth)/2+"px"

}

</script>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7642986.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存