资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css中内容出现滚动时不影响布局解决办法

最终我们需要的效果是:

创新互联是一家集网站建设,勃利企业网站建设,勃利品牌网站建设,网站定制,勃利网站建设报价,网络营销,网络优化,勃利网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

css中内容出现滚动时不影响布局解决办法

它的布局结构式这样的:

css中内容出现滚动时不影响布局解决办法

代码实现说明:

css中内容出现滚动时不影响布局解决办法

完整代码:







*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: calc(450px + 17px);
height: 400px;
background-color: greenyellow;
overflow: auto;
}
.container .inner-container{
overflow: hidden;
width: 450px;
background-color: #ccc;
padding: 10px;
padding-bottom: 0px;
}
.container .inner-container>div{
width: 100px;
height: 100px;
background-color:#D43F3A;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.container .inner-container>div:nth-child(4n){
margin-right: 0;
}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

另一种效果:

css中内容出现滚动时不影响布局解决办法

它的布局结果是:

css中内容出现滚动时不影响布局解决办法

代码:

css中内容出现滚动时不影响布局解决办法

完整代码:













*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 490px;
height: 400px;
background-color: #ccc;
overflow: auto;
overflow-x: hidden;
}
.container .inner-container{
width: 490px;
padding: 10px 30px;
}
.container .inner-container>div{
width: 100px;
height: 100px;
background-color:#D43F3A;
float: left;
margin-right: 10px;
margin-bottom: 10px;
}
.container .inner-container>div:nth-child(4n){
margin-right: 0;
}





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17



总结:

1 通过加一个中间层来处理出现的滚动条的影响

2 chrome下的滚动条的宽度是17px


本文名称:css中内容出现滚动时不影响布局解决办法
文章转载:http://cdkjz.cn/article/pjgocd.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220