0

私はこれで片隅にいます。私は2つのコンテナを持つレイアウトを持っています。コンテナーの 1 つはマップ (#main) を表し、常にユーザー ビューに表示される必要があります。もう 1 つのコンテナー (#sub) はスクロール可能なコンテンツとして機能します。コンテンツが水平方向に収まる場合は、すべて問題なく表示されます。ただし、水平バーが表示されるとすぐに (ウィンドウのサイズを変更して複製する)、スクロール可能なコンテンツが固定されたコンテンツと重なり、修正方法がわかりません。代わりに固定コンテンツを絶対に配置し、javascriptを使用してその位置を上から調整することで、それを修正する1つの方法を知っています。それを修正する方法はありますか？

サンプルコードは次のとおりです。

HTML:

<div id="content">
    <div id="main">main</div>
    <div id="sub">
        <strong>Sub</strong><br />
        sub<br />
        sub<br />
        sub
    </div>
</div>

CSS:

#content {
    width: 1200px;
    margin: 0 auto;
}
#main {
    position: fixed;
    width: 849px;
    height: 500px;
    background: red;
}
#sub {
    position: relative;
    float: right;
    width: 350px;
    height: 3500px;
    background: green;
}

JSFミドルリンク

4

1 に答える 1

1

あなたのコメントに基づいて、ユーザーがスクロールできないようにすると問題が解決するようです:

body {
  padding: 0;
  margin: 0;
  overflow-x:hidden;
 }

両方をスクロールしたい場合は、固定位置を削除する必要があります。

#main {
position: relative;
width: 849px;
height: 300px;
background: red;
font-size: 50px;
text-align: center;
padding-top: 200px;
    float:left;
}
于 2013-04-09T19:56:54.023 に答える