Question

我在页面中有3个单独的部分。每个都应该单独滚动。如果我们滚动整个页面，每个div都应滚动。

如何实现这一目标。以下是http://jsfiddle.net/qLonzsvj/

的小提琴

html{
 overflow-x:hidden;
}
.left-column
 {
    float:left;
    width:30%;

 }
 .right-column
  {
    float:right;
    width:30%;

  }
  .center-column
  {
    margin:auto;
    width:30%;

  }

Answer 1

需要更改一些内容才能使其正常工作我在jsfiddle上做了一点模拟，你需要给盒子定义一个高度和一个scroll的溢出属性。此外，你不需要为了实现这一目标而不必漂浮你的盒子。

::: EDIT ::: 更新了Js Fiddle以进行页面滚动 http://jsfiddle.net/kriscoulson/qLonzsvj/2/

*{
    box-sizing: border-box;
}
.cols {
    float:left;
    width:33%;
    overflow: scroll;
    height:30px;
}

.left-column{
    background: red;
    
}
.center-column{
    background: blue;
}
.right-column{
    background: green;
}

<div id="container">
<div class="cols left-column">
    <div>div1</div>
    <div>div1</div>
    <div>div1</div>
</div>
<div class="cols center-column">
    <div>div2</div>
    <div>div2</div>
    <div>div2</div>
</div>
<div class="cols right-column">
    <div>div3</div>
    <div>div3</div>
    <div>div3</div>
 </div>

Answer 2

我认为这就是你要找的东西。

<强> CSS

＆＃13;

html, body {
height: 100%;
position:relative;
}

body
{
background:#00253f;
line-height:100px;
text-align:center;
}

.left
{
position:absolute;
margin-left:5%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}

.center
{
position:absolute;
margin-left:25%;
margin-top:3%;
display:block;
height:80%;
width:50%;
background:#ccc;
overflow:scroll;
}

.right
{
position:absolute;
margin-left:75%;
margin-top:3%;
display:block;
height:80%;
width:20%;
background:#ddd;
overflow:scroll;
}

＆＃13;

＆＃13; 的 HTML
＆＃13;
＆＃13;
<div class="left"> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div class="center"> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div class="right"> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div>
＆＃13;
＆＃13;
＆＃13; 在这里查看演示 jsfiddle

css：滚动问题

2 个答案: