Home > Article > Web Front-end > html centering problem_html/css_WEB-ITnose
html centering problem_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:10:301122browse
When making a page, add a layer f82a050dc22a9f31acf63b2bc379706316b28748ea4df4d9c2150843fecfba68 in the body, and then use #wraps{ margin:0px auto; width:960px;}
This is centered, but when the content changes and a vertical scroll bar appears on the body, the entire content will move horizontally.
The solution I am currently thinking of is to always display the vertical scroll bar. But don't know what to do? Or do you have any other good solutions?
Note: The height of the page is uncertain, so the presence or absence of the vertical scroll bar is also uncertain.
Reply to discussion (solution)
body,html{width:100%;height:100%; overflow-x:hidden;min-width:960px;margin:0;padding:0;}
body,html{width:100%;height:100%;overflow-x:hidden;min-width :960px;margin:0;padding:0;}
It doesn’t work
The scroll bar will probably have a distance of more than 10 pixels, and the margin left and right auto will of course be recalculated, and there will be a slight adjustment. Don't you want it to be recalculated?
It is best not to give a percentage of width:960px; to control the scroll bar
<!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> What does this mean?
On the 5th floor, what if you change the browser window size? Maximize, restore...
HTML code
fef50554eca1a427827adaa329da8122
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
< ;meta charset="gb2312" />
gin:0px auto; width:960px;
...
That’s what it means. Your method is also worthy of reference, but as changjay said, there is still a little problem when switching between medium size and maximum size. Thank you! Looking forward to a better solution, I will also write js myself.