ホームページ >ウェブフロントエンド >htmlチュートリアル >html センタリング問題_html/css_WEB-ITnose
html センタリング問題_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:10:301145ブラウズ
ページを作成するときは、本文にレイヤー f82a050dc22a9f31acf63b2bc379706316b28748ea4df4d9c2150843fecfba68 を追加し、 #wraps{ margin:0px auto; width:960px;} を使用します
このようになりますただし、コンテンツが変更され、本文に垂直スクロールバーが表示されると、コンテンツ全体が水平に移動します
現在考えている解決策は、常に垂直スクロールバーを表示することですが、方法がわかりません。それをするために？それとも他に良い解決策はありますか？
注: ページの高さが不定であるため、垂直スクロール バーの有無も不定です。
ディスカッションへの返信 (解決策)
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;}
機能しません
スクロールバー距離が 10 ピクセルを超える場合、左右のマージンの自動は当然再計算され、わずかに調整されます。再計算したくないんですか？
スクロール バーを制御するには、width:960px; のパーセンテージを指定しないのが最善です
<!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階でブラウザのウィンドウサイズを変更したらどうなるでしょうか？最大化、復元...
HTML コード
100db36a723c770d327fc0aef2ce13b1
title> しかし、changjay が言ったように、中サイズと最大化がまだあります切り替え時に少し問題があります。ありがとう！より良い解決策を期待して、私も自分で js を書くつもりです。