div居中的问题

最新推荐文章于 2022-04-25 11:47:24 发布

lansexingkong

最新推荐文章于 2022-04-25 11:47:24 发布

阅读量439

点赞数

文章标签： div 浏览器文档 jquery generator border

本文链接：https://blog.csdn.net/lansexingkong/article/details/6429637

版权

今天的天气真有点闷啊，不过还得上班啊。今天一个同事问起了div居中，所以刚才一直在弄，发现几个问题啊

先看一下代码(注意加粗的代码):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title> New Document </title>

#pricediv{

width:200px;

height:200px;

background-color:#CCFFFF;

position:absolute;

z-index:1000;

left:500px;

display:none;

}

</style>

function toshowdiv(event,obj){

var ping = document.body.clientHeight; //整个屏幕高度(你能看到的,不加"http://www.w3.org/TR/html4/loose.dtd",如果加上就是连滚动条所有的,包括你看不到的)

alert(document.body.scrollTop); //滚动条滚动下去的高度(如上:加"http://www.w3.org/TR/html4/loose.dtd"在火狐下是0)

var width = $('#pricediv').css('width');

$('#pricediv').css('top',document.body.scrollTop + (ping - parseInt(width)) / 2);

$('#pricediv').css('display','block');

}

</script>

</head>

<body>

<br>

......

</body>

</html>

其实代码很简单啊.. 主要说一下http://www.w3.org/TR/html4/loose.dtd ,任何一个网页第一行代码，有没有它的区别，我上面已经注释了,它其实是一个dtd文档。

所以本实例中，应该去掉http://www.w3.org/TR/html4/loose.dtd 就会实现效果.

对于这种问题，我还是更愿意用jquery,它帮我们解决了兼容问题。如上面的变量 ping 可以用jquery的$(window).height()代替,document.body.scrollTop可以用$(window).scrollTop()代替。附上jquery的获取浏览器的长，高

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin

$(window).scrollTop() ：是获取滚动条的高度。

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin

})