3

2 列で構成された CSS レイアウトがあります。左側のナビゲーション列は固定 div です。右側の列のメインコンテンツを下にスクロールしている間、そこにとどまります。

問題は、ブラウザ ウィンドウを縮小したりズームインしたりするときに発生します。ブラウザ ウィンドウを水平方向にスクロールすると、右側のメイン コンテンツが左側のナビゲーション カラムに重なり始めます。

ブラウザ ウィンドウのサイズやズーム レベルに関係なく、水平方向にスクロールしたときに固定 div が重ならず、メイン列が右に移動するように修正するにはどうすればよいですか?

実際に見ることができます: http://justarandomone.tumblr.com/

すべてのコードはソースにあります (かなり面倒です。申し訳ありません)。

誰かが助けてくれることを願っています。ありがとう！

4

4 に答える 4

1

私の意見では実際には問題ではありません..とにかく、コンテンツのメインブロックをdivに入れて絶対的な配置を与えることで修正できると思います。float:left をサイドバーから削除します。必要ありません。

#container {
    width:751px;
    margin-top:56px;
}

#sidebar {
    width:235px;
    position:fixed;
    top: 0px;
    left: 0px;
}
#content {
    position: absolute;
    top: 0px;
    left: 235px;
    width: 516px; /* 751 -235 */
}
于 2012-04-04T20:32:12.747 に答える
0

Chromeを異常に小さなウィンドウサイズに縮小したり、iPhoneでも再現したりできます。サイドバーの div を設定すると、position:fixed強制的にその位置に留まります。水平スクロールで問題が発生します。

サイドバーを切り替えてから、サイドバーとブログロールの両方position:absoluteを同期しましたtop-marginが、うまく機能しているようです。

于 2012-04-04T20:46:05.117 に答える
0

可能な提案。css を使用して、「blogroll」と「sidebar」の両方の高さを同じ値に設定します (この例では 100% を使用しました)。Thes add 'overflow: auto;' 「ブログロール」へ

#sidebar {
    width:235px;
    height:100%;
    float:left;
    clear:both;
    position:fixed;
}

#blogroll {
    width:558px;
    margin-left:290px;
    position:absolute;
    min-height:300px;
    height: 100%;
    overflow:auto;
    padding-bottom:27px;
    padding-top: 171px;
}

これにより、ブログロールがページ内に独自のスクロールバーを持つようになります (そのため、それらを使用しますが、理論的には、ページにはスクロールバーがありません。確認するには、ie のボディマージンを 0 に設定してください。動作するはずです。

于 2012-04-04T21:12:17.893 に答える