html センタリング問題_html/css_WEB-ITnose-htmlチュートリアル-php.cn

html センタリング問題_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 12:10:30

オリジナル

1121 人が閲覧しました

ページを作成するときは、本文にレイヤー

を追加し、 #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 コード

title> しかし、changjay が言ったように、中サイズと最大化がまだあります切り替え時に少し問題があります。ありがとう！より良い解決策を期待して、私も自分で js を書くつもりです。