33

HTML ページに 2 つの列があります。

<div id="content">
  <div id="left"></div>
  <div id="right"></div>
</div>

それぞれがページの半分を占めています

#left {
    float: left;
    width: 50%;
}

#right {
    float: left;
    width: 50%;
}

独立して流れるようにすることはできますか？つまり、両方の列を同時にスクロールするのではなく、左の列を下にスクロールできるようにしたいのですが、右の列の上部にとどまります。

4

6 に答える 6

47

このフィドルを参照してください

#content, html, body {
    height: 98%;
}
#left {
    float: left;
    width: 50%;
    background: red;
    height: 100%;
    overflow: scroll;
}
#right {
    float: left;
    width: 50%;
    background: blue;
    height: 100%;
    overflow: scroll;
}
于 2013-03-16T19:10:48.097 に答える
12

以前の投稿は少し改善されました。

  • 100% html と本体サイズ .... スクロールバーなし
  • 左右のボックスの余白
  • 必要なときだけの個々のスクロールバー (「自動」)
  • その他の詳細: 試してみてください!

Fiddle: 2 つの独立したスクロール div

html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
}
#content {
  height: 100%;
}
#left {
  float: left;
  width: 30%;
  background: red;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5em;
}
#right {
  float: left;
  width: 70%;
  background: blue;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: 0.5em;
}
于 2015-05-18T14:55:37.903 に答える
5 
body {
  margin: 0;
}

#left {
  position: fixed;
  background-color: green;
  width: 50%;
  height: 100%;
  overflow: auto;
}

#right {
  position: fixed;
  background-color: red;
  width: 50%;
  height: 100%;
  right: 0;
  overflow: auto;
}

このフィドルを見てください

于 2019-08-04T19:38:05.950 に答える
4

列の高さを設定し、 を設定しoverflow: autoます。すべてのルールを同じ CSS セレクター内に配置することもできます。このような：

#left, #right {
    float: left;
    width: 50%;
    height: 200px; /* Set your height here */
    overflow: auto;
}
于 2013-03-16T19:09:52.833 に答える
3

はい。高さを制限する必要があります。 実際の例については、このフィドルを参照してください。

#content {
    height: 10em;
}
#left {
    float: left;
    width: 50%;
    background-color:#F0F;
    max-height:100%;
    overflow: scroll;
}

#right {
    float: left;
    width: 50%;
    background-color:#FF0;
    max-height:100%;
    overflow: scroll;
}
于 2013-03-16T19:09:24.390 に答える
1

簡単に言えば、CSSをこのように記述します

#content div{
    height: 300px;
    width:200px;
    float: left;
    border:1px solid blue;
    overflow-y: auto;
}

ライブデモを参照

于 2013-03-16T19:18:16.140 に答える