ボディタグをスクロールバーに合わせる方法は？

私のウェブサイトでは、一部のページには画面に正確に収まるコンテンツと、スクロールするコンテンツを持つページがあります。すべてのページは、同じHTML構造を持っています。ボディタグをスクロールバーに合わせる方法は？

<body> 
    <div id="header"></div> 
    <div id="contentArea"></div> 
    <div id="footer"></div> 
</body> 

#header { 
background: none repeat scroll 0 0 #FFFFFF; 
border-bottom: 1px solid #EDEDED; 
height: 172px; 
margin: 0 auto; 
overflow: hidden; 
padding-top: 2px; 
width: 900px; 
} 

#contentArea { 
background: none repeat scroll 0 0 #FFFFFF; 
margin: 0 auto; 
padding: 0 0 25px; 
text-align: left; 
width: 900px; 
} 

#footer { 
border-top: 1px dashed #CCCCCC; 
margin: 0 auto; 
padding: 0; 
text-align: center; 
width: 900px; 
}

私は別のページに移動すると、一部のページにスクロールバーが全体のWebページは、いくつかの20ピクセルのために左側に向かって移動のように見えるその時点で、原因のコンテンツに表示されます。

スクロールバーが表示されたときに<body>を調整するにはどうすればよいですか？

ありがとうございます！

出典

2011-06-24 Anonymous

ちょうど私は 'margin：0 55px;'を与えてみました。私のモニター（1024 X 768）では、それは良いようです。それは左に向かって動かない。しかし、私はこれが大きなモニターでは問題になると考えています。それを行うための他の方法!! –

最も簡単なトリックは常にスクロールバーを表示することです。これは、HTML5 Boilerplateが行うことです。

html {overflow-y：scroll; }

これがあなたのニーズに合わない場合は、JavaScriptを使用する必要があります。ページの読み込み時にボディの高さがウィンドウの高さよりも大きい場合は、#header、#content、#footerを左に移動します。ビアパディング、またはボディのマージンを介して行われます。

しかし、スクロールバー自体の幅を調べる簡単な方法はありません。これも、Javascript経由の検出が必要です。（基本的には：要素を作成します - >それはコンテンツのスクロールのmake - >どのようにコンテンツの幅の変更を参照してください）

出典

2011-06-24 10:15:18 Boldewyn

合意しました。間違いなくスクロールバーを常に維持しておくのが間違いありません。私はこれを数多くのユーザーでテストしましたが、スクロールバーが表示されていないときには無効なスクロールバーに気づいていませんでした。 IE6以前では、正しくリコールすると、常に垂直スクロールバーが表示されます。 – danjah

私は記事を見つけます - [detect-scrollbar-width]（https://davidwalsh.name/detect-scrollbar-width）、助けてくれる人を助けてください。 – Spy

@Spyリンクありがとう！はい、それは私が心に留めていたことの要点（そして良い実装）です。 – Boldewyn

私はあなたがBODYクラスのWIDTH CSS属性を指定する必要があります信じて：

body { 
    width:100%; 
}

出典

2011-06-24 10:13:58 heximal

ありがとうございます。私はそれを試した。しかし、問題は解決されていません！ –

<body style="height:100%; width:100%; overflow:auto;"> 
    <div id="header"></div> 
    <div id="contentArea"></div> 
    <div id="footer"></div> 
</body>

ここではjsfiddleリンクです：完全にテストすることなくhttp://jsfiddle.net/NGWgz/2/

出典

2011-06-24 10:16:11

、私はあなた」の理由を疑いますこれは、ページの本文に表示されるさまざまな要素に対して900pxの絶対幅が定義されているためです。

スクロールバーが表示されると、それが画面の不動産に食べられるため、内容が900pxの幅に維持されます。私はより流動的なサイジングモデルに移行するか、少なくとも何らかの種類のコンテナにコンテンツをラップして、スクロールバーがそれに干渉しないようにします。

出典

2011-06-24 10:19:55 Ben

これを行う最も簡単な方法は、min-heightとmax-heightのプロパティを使用することです。つまり、Overflow要素を使用する必要がなくなり、コンテンツは移動しません。

分の高さ：... PX /全角/％
最大高さ：... PX /全角/％

だから、あなたはあなたのケースで書きます：

min-height：元の高さ（ピクセル単位、パーセントまたはems）。
max-height：auto;

あなたがあなたのボックス/ラッパー/ divの内側に入れどのくらいの内容は重要ではありません。この方法で、それはあなたがあなたのページに何かを追加するたびにそれを変更することなく、ページの高さが大きくなります。
また、widthと同じプロパティがありますが、試していません。

私の情報源：
1-Iは、Webページを作成し、SB
2 - http://www.w3schools.com/cssref/pr_dim_max-height.aspで

をソフトウェア工学を勉強していますPS：私はこれはすでに解決しているけど、私はそれが誰かのために役に立つかもしれないと思いますそうでなければ彼らは自分のWebページで作業しています。

出典

2014-04-28 21:38:50

ボディタグをスクロールバーに合わせる方法は？

答えて

関連する問題