div超出宽度或高度显示滚动条

style="overflow:auto;" 一般使用:overflow:auto;这样在移动下有些超出的就可以进行滚动了。

效果:

overflow 一共有5个属性。

1、overflow:auto;内容会被修剪,超出设置的宽高后会出现滚动条

2、overflow:scroll;内容会被修剪,不管内容是否超出,都会出现滚动条的位置

3、overflow:visible;这个是默认值,内容不会被修剪,会出现在元素框外面。

4、overflow:hidden;内容被修剪,多余的内容被隐藏

5、overflow:inherit;从父元素那里继承overflow的值。

程序员工具:https://www.toolnb.com/

实现div宽度自适应且超出部分设置滚动条可以采用以下几种方法: ### 方法一:使用`overflow: auto` 直接在`div`的样式中设置`overflow: auto`,当内容超出`div`的宽度时,会自动显示滚动条。示例代码如下: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .adaptive-div { width: auto; max-width: 100%; overflow: auto; border: 1px solid #ccc; } </style> </head> <body> <div class="adaptive-div"> aaaa<br> aaaa<br> aaaa<br> aaaa<br> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br> aaaa<br> aaaa<br> aaaa<br> aaaa<br> aaaa<br> aaaa<br> aaaa<br> aaaa<br> </div> </body> </html> ``` 这里将`div`的宽度设置为`auto`,并且设置`max-width: 100%`,保证`div`宽度自适应,同时使用`overflow: auto`来处理内容超出的情况,类似引用[5]的思路。 ### 方法二:在flex布局中实现 当使用flex布局时,若高度宽度自动填满剩余空间,可按如下方式设置滚动条: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .parent { display: flex; width: 100%; } .adaptive { flex: 1; width: 30%; } .inner { position: relative; height: 100%; width: 100%; } .flex-column { display: flex; flex-direction: column; height: 100%; } .grow { flex-grow: 1; height: 0; } .scrollable { overflow: auto; height: 100%; overflow-x: hidden; } </style> </head> <body> <div class="parent"> <div class="adaptive"> <div class="inner"> <div class="flex-column"> <div class="grow"> <div class="scrollable"> 自定内容 </div> </div> </div> </div> </div> </div> </body> </html> ``` 此方法参考了引用[3]中在flex布局下设置滚动条的思路,使得`div`宽度自适应且内容超出显示滚动条
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值