css : 滚动问题
css : Scrolling issue
我在页面中有 3 个独立的部分。每个都应该滚动 dividually。如果我们滚动整个页面,每个 div 应该滚动。
如何实现。以下是 fiddle 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%;
}
需要更改一些内容才能使其正常工作我在 jsfiddle 上做了一个小模型,您需要为框指定定义的高度和滚动溢出 属性。此外,您无需随意浮动您的盒子即可实现此目的。
:::编辑:::
更新了用于页面滚动的 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>
我想这就是您要找的。
CSS
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;
}
HTML
<div class="left"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="center"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="right"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
在这里查看演示
jsfiddle
我在页面中有 3 个独立的部分。每个都应该滚动 dividually。如果我们滚动整个页面,每个 div 应该滚动。
如何实现。以下是 fiddle 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%;
}
需要更改一些内容才能使其正常工作我在 jsfiddle 上做了一个小模型,您需要为框指定定义的高度和滚动溢出 属性。此外,您无需随意浮动您的盒子即可实现此目的。
:::编辑::: 更新了用于页面滚动的 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>
我想这就是您要找的。
CSS
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;
}
<div class="left"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="center"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>
<div class="right"> Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br>Hello<br></div>