9

私は持っています:私はいくつかのウェブページを両方ともこのアウトラインで持っています:

<body>
<div id="container">
CONTENT
</div>
</body>

CSSで：

body{
color:#000000;
background-color:#FFFFFF;
background-image: url(background.jpg);
background-repeat: repeat-x;
font-family: verdana;
letter-spacing: 1px;
}
#container{
margin-left:auto;
margin-right:auto;
margin-top:5px;
width: 700px;
}

問題:すべてのページが短いため、スクロール バーは表示されませんが、1 ページだけ長いため、右側に垂直スクロール バーが表示されます。この 2 ページ目により、コンテナーが少しだけ (左に) シフトされます。

私が理解している一般的な解決策は、スクロールバーをすべてのページに表示することですが、それは多くのページのうちの1ページにすぎないため、本当に避けたいと思っています。

質問:すべてのページにスクロールバーを表示せずにコンテナを中央に配置したままコンテナを移動しないようにする方法はありますか?

4

4 に答える 4

11

大きなモニターを持っている人は、どのページにもスクロールバーが表示されることはありません。

小さなモニターを持っている人は、常にすべてのページにスクロールバーが表示されます。

モニターのサイズに関係なく、ユーザーは任意のブラウザーウィンドウを任意のサイズにして、スクロールバーを表示することができます。

ああ、ブラウザウィンドウのコンテンツ領域を可能な限り半分の高さにするブラウザツールバーアドオンを12個追加したい人たちのことを忘れないでください。

それはまさにそれであり、静的な解決策はそれを回避するつもりはありません。上記の理由により、1ページの余白を変更することは解決策ではありません。

人々が一緒に暮らすことを学んだことを修正することを主張するなら、それはあなたがあなたの左マージンを計算してスクロールバーの幅を加える「動的な」JavaScriptソリューションでなければならないでしょう。ブラウザが異なれば、バーの幅も異なるため、これも計算する必要があります。

編集： 誰かが別の回答で言ったように、これはデフォルトのブラウザの動作であり、そのままにしておく必要があります。

Edit2： ユーザーダンプがコメントで述べたように、ウィンドウのサイズがユーザーによって変更されるたびに、JavaScriptをトリガーする必要もあります。

これはあなたの時間の壮大な無駄になるでしょう。通常、ブラウザのデフォルトの動作はブラウザに任されています。変数が多すぎて説明できず、テストするすべてのシナリオ、スキン、OS、ブラウザーバージョン、ブラウザーブランド、ツールバーアドオン、モニタータイプ、サイズなどがない場合は、何かを見逃してしまいます。 。これを機能させ始めたら、Explorerの例外と修正を行う必要があることがわかります。あなたがそれを知る前に、あなたは膨満感の巨大な部分になってしまいます...そして何のために？これの価値は何ですか？

開始点： すべてのブラウザと状況で100％保証された期待される動作。

エンドポイント： モニター/システムでのみ見栄えがすることが保証されています...考えもしなかったシステム/シナリオでは、ジャンクのように見えるリスクがあります。

最初に、事前に作成されたJavaScriptソリューションまたはjQueryプラグインを検索します...見つからない場合は、理由を自問してください。

  • 実用的ではない
  • ありえない
  • トラブルの価値がない（需要が少ない）

Edit3： 好奇心を満たすために検索を行いました。jQueryソリューションを備えたスレッドと、スクロールバーの幅を計算するためのメソッドへのリンクを見つけました。

私見、これは時間とリソースの無駄ですが、興味のある人のためのリンクはここにあります...

http://expressionengine.com/archived_forums/viewthread/158703/

Edit4： これが私が見つけたCSSソリューションです。私はこれをテストしていませんが、それがうまくいくならそれは甘いでしょう。

html {
    overflow-y: scroll;
}

http://haslayout.net/css-tuts/Fixing-Page-Shift-Problem

Edit5： CSSソリューションは機能しますが、私の好みではありません。すべてのページにスクロールバーを作成しますが、不要な場合はグレー表示または空になります...エレガントではありません。

于 2011-04-09T15:04:13.607 に答える
10

純粋なCSSソリューションについてはわかりませんが、javascriptを使用して、左マージンの正しい幅を動的にカウントおよび調整できます（右マージンを少し細くします-スクロールバーのサイズによって）。

ところで：IMO：これに対処する正しい方法は次のとおりです。そのままにしておきます。これはデフォルトの動作であり、ユーザーはあなたほどこれについて心配していないと思います。これは私の意見であり、誰かが異なるものを持っているかもしれませんが、（これを解決するために）すべてのページにスクロールバーを追加することは壮大な失敗です。:)

于 2011-04-09T14:52:28.493 に答える
0

php を使用して、長いページにいるときに左パディング値を追加することもできますが、スクロールバーはブラウザー/プラットフォームによって幅が異なるため、javascript が唯一のピクセルパーフェクトなソリューションになります。

于 2011-04-09T14:59:24.007 に答える
0

純粋なcssオプションが必要な場合は、幅と高さが100％のボディ内に絶対配置されたdiv、オーバーフローオート、スクロールバーの幅よりも大きい右パディングが、コンテンツを長いページに残っています。

この手法をずっと前に使用したことは知っていますが、使用しなければならなかった正確なCSSの癖を思い出せません。

于 2011-04-09T15:49:55.210 に答える