html居中有关问题
日期：2014-05-17 浏览次数：20621 次
html居中问题
做页面时，是在body里加个层<div id="wraps"></div>，然后使#wraps{ margin:0px auto; width:960px;}
这样居中是居中了，但是，当内容改变使body出现垂直滚动条时，就会发生内容整体水平移动动的情况，
目前我想到的解决方法是让垂直滚动条始终显示，但是不知道该怎么做？或者各位有什么其他好的解决办法？
注：页面高度是不确定的，所以垂直滚动条的有无也是不确定的。
------解决方案--------------------
body,html{width:100%;height:100%;overflow-x:hidden;min-width:960px;margin:0;padding:0;}
------解决方案--------------------
滚动条大概会产生10几个像素的距离，margin 左右 auto 当然会重新计算，会有稍微的调整。难道你想不让它重新计算？
------解决方案--------------------
最好不要 width:960px; 给百分比 能控制 滚动条
------解决方案--------------------
做页面时，是在body里加个层<div id="wraps"></div>，然后使#wraps{ margin:0px auto; width:960px;}
这样居中是居中了，但是，当内容改变使body出现垂直滚动条时，就会发生内容整体水平移动动的情况，
目前我想到的解决方法是让垂直滚动条始终显示，但是不知道该怎么做？或者各位有什么其他好的解决办法？
注：页面高度是不确定的，所以垂直滚动条的有无也是不确定的。
------解决方案--------------------
body,html{width:100%;height:100%;overflow-x:hidden;min-width:960px;margin:0;padding:0;}
------解决方案--------------------
滚动条大概会产生10几个像素的距离，margin 左右 auto 当然会重新计算，会有稍微的调整。难道你想不让它重新计算？
------解决方案--------------------
最好不要 width:960px; 给百分比 能控制 滚动条
------解决方案--------------------
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
#wraps{
margin:0px auto; width:960px;
border:1px solid red;
position:relative; left:0; top:0;
}
</style>
</head>
<body>
<div id="wraps">123</div>
<button id="btn">body长高了，div会移动吗？</button>
<script>
var $ = function(id){
return document.getElementById(id);
};
var $t = function(tag, cot){
cot = cot || document;
return cot.getElementsByTagName(tag);
};
var a = document.body.offsetWidth;
$('btn').onclick = function(){
$t('body')[0].style.height = '2000px';
var b = document.body.offsetWidth;
var t = a - b;
//console.log(t)
if( t ){
$('wraps').style.left = t/2+'px';
}
}
</script>
</body>
</html>
------解决方案--------------------
5楼的，如果切换浏览器窗口大小呢？最大化，还原……
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
