html居中有关问题

2012-05-02

html居中问题做页面时，是在body里加个层div idwraps/div，然后使#wraps{ margin:0px auto width:96

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; 给百分比能控制滚动条
[解决办法]

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楼的，如果切换浏览器窗口大小呢？最大化，还原……

热点排行

CSS

html居中有关问题