html - たとえば、960px幅のWebサイトレイアウトをどのように中央に配置しますか？

Question

... margin：0autoを使用せずに;

なんで？これにより、スクロールバーのあるページは、スクロールバーのないページとは中央の位置が異なるため、ページをナビゲートするときに、divがジャンプします。皆さん、何を提案しますか？

score 4 · Accepted Answer

スクロールバーがビューポートの幅に影響を与え、ページの中心線に影響を与えるため、「ジャンプ」効果は避けられないのではないかと思います。これは、テクニック ( text-align: center;、position: -50%;、など) に関係なく発生します。

回避策は、垂直スクロールバーが常に表示されるようにすることです。これを使って：

html { overflow-y: scroll; }

ここから、しかし、そのページのほとんどのサンプルを無視して、一番下にジャンプできます.

overflow-xとoverflow-yは、もともと CSS2.x 標準overflowプロパティの Microsoft 拡張機能であったことに注意してください。ただし、overflow-xとはどちらもoverflow-yCSS3 です。

score 2 · Accepted Answer

1 つの方法はoverflow-y: scroll;、すべてのページに HTML タグを付けて、右側にスクロールバーが表示されるようにすることです (必要のないページでは非アクティブになります)。こうすることで、すべてのページでクライアントの幅が同じになります。

score 0 · Accepted Answer

純粋なCSS? 他の回答が言っているように、スクロールバーを常に表示させるためだけに。

もう 1 つの方法は JavaScript 経由です。ページにスクロールバーがあるかどうかを DOM Ready で検出し、それに応じてコンテナーを微調整します。

score 0 · Accepted Answer

これを試して：

.width960container{
    width:960px;
    min-height:500px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-250px 0 0 -480px;
}

4 に答える 4