在DIV中设置内容超出后自动显示滚动条(可分别设置横向竖向是否展示)

要求:
在一个DIV中设置固定的大小,当里面内容超出时则自动展示横向/竖向滚动条!

CSS中的一个属性:overflow:auto

.right_bottom {
  width: 100%;
  height: 460px;
  overflow:auto;
}
因为我横向没超所以不展示咯!

效果图:
在这里插入图片描述

但是如果你横向也超大小,竖向也超大小,又不想让横向的显示出来(真的很丑hhhhh)

我们可以这样设置:
1)隐藏竖向,显示横向:
overflow-x:scroll,或者:overflow-y:hidden即可实现这个效果,二选一就可!

2)显示竖向,隐藏横向:
overflow-y:scroll或者:overflow-x:hidden

另外:如果设置横向滚动条的时候,一直不显示横向拉的那个条是因为你的内容还不足以让它显示出来哦!

演示下:
我想在这个div中放些其他内容,大家可滑动鼠标查看,但是不知道哪里设置的大小把横向内容撑出来了,总是有横向滚动条,真的很丑:
此时我的css是这样写的:

.right_down{
  text-align: left;
  width: 100%;
  height: 400px;
  border: #2c3e50 solid 1px;
  overflow:auto;
}

在这里插入图片描述
然后我设置了overflow-x:hidden这个属性:

.right_down{
  text-align: left;
  width: 100%;
  height: 400px;
  border: #2c3e50 solid 1px;
  overflow-x:hidden;
  //overflow:auto;
}

滚动条就消失啦!
在这里插入图片描述
希望可以帮到大家!

  • 8
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值