内容滚动条和子div高度自适应
来源:互联网 发布:光学字符识别软件 编辑:程序博客网 时间:2024/05/21 10:26
内容滚动条和子div高度自适应
写在前面:老套路有图有真相,这才叫做分享。本文内容是:一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。
先放最终效果(在下面会有demo代码。):
实现这些效果要怎么做呢?咱一步一步来。
第一步:
先设置html结构:这里我已经搭好了。
<div class="box"> <div class="box1"> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--> <!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--> <!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--> <!--<span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span>--> </div> <div class="box2"> <span>填充填充</span> </div></div>
第二步然后开始写css样式了(我会把踩坑经历放上去,所以不要一步一步走,看效果):
设置父元素box的样式:
.box{ margin: 0 auto; width: 40%; background: #ccc; height: 15rem; border: 5px solid red; /*为了区分各个box界限*/ }
设置box1的样式:
.box1{ min-height: 3rem; max-height: 13rem; background: coral; }
现在界面是这样子的:
现在尝试把html解除注释:
然后浏览器里面变成这样了。。。
excuse me???说好的滚动条呢?说好的自适应呢?
下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。):
在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。
overflow属性大家去看下,http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
知道你们不会去看,所以我又放图片了。。。
所以对于这部分我们要隐藏起来。 加个overflow: hidden;变成。
大家也都注意到了overflow: scroll;这个属性,是的,我们加上去试试。
滚动条是出来了,但是X轴的滚动条是什么鬼?
所以百度好久的答案,你们有福了!—————overflow-x: hidden;
然后我顺便查到上面的简写方式。
原来用overflow-x: hidden;overflow-y: auto;这两行代码就可以做到!
我刚才是这样子的
.box1{ min-height: 3rem; overflow: hidden; max-height: 13rem; background: coral; overflow: scroll; overflow-x: hidden; }
最终的代码是这样的。
.box1{ min-height: 3rem; max-height: 13rem; background: coral; overflow-x: hidden; overflow-y: auto; }
好了今天的内容就到这里了。。等等,好像有什么不对的地方?
说好的div高度自适应呢??
额。。。关于这个问题,我只有一个取巧的办法。
我先放两张图片:
ps:这样就算是自适应了吧?
现在的情况是这样子的:
我把他们两个的背景颜色都改成一样的,再来看下:
这里也是,实际上,他的box就那么大。
写这篇花了一个半小时,主要是自己昨天才弄懂的,然后今天做demo 的时候又忘记怎么自适应div了,弄了老半天,然后用F12看昨天的代码才恍然大悟!(其实昨天没真懂,这会是真懂了),写的是真的累,码字不易,望且看且珍惜,给个喜欢吧。
最后又到了观众朋友们最喜欢的求赞求关注环节:希望看完的朋友点个喜欢,想关注我这个菜鸡是如何成长的也可以关注一下我,基本上每个月都不会少于十五篇文章(看到干货我也会进行分享)。然后github也互相加个star。码字不易,感谢支持,感激不尽!
说好的demo,差点忘记,回来更新。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div-height-roll-demo</title> <style> .box{ margin: 0 auto; width: 40%; background: #ccc; height: 25rem; border: 5px solid red; /*为了区分各个box界限*/ } .box1{ min-height: 3rem; max-height: 13rem; background: coral; overflow-x: hidden; overflow-y: auto; } .box2{ text-align: center; border-top: 3px solid black; } </style></head><body><div class="box"> <div class="box1"> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> <span>填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充填充</span> </div> <div class="box2"> <span>填充填充</span> </div></div></body></html>
- 内容滚动条和子div高度自适应
- div 自适应高度 最大高度后滚动条显示
- 使用div创建textArea无滚动条高度自适应
- div 模拟text area 高度自适应,不要滚动条
- 内容超出div高度出现滚动条或者隐藏
- iframe自适应宽度和高度,没有滚动条
- js代码,当div中内容高度超出div高度的时候实现定制滚动条!
- 【CSS】树结构的滚动条岁内容高度自适应显示,树右边列表宽度自适应
- 窗口打开时div内容自适应窗口高度和宽度
- css textarea 高度自适应,无滚动条
- iframe高度自适应及隐藏滚动条
- iframe滚动条隐藏高度自适应
- 实现父div 高度 随 子div高度自适应
- 子元素div高度不确定,父div自适应高度
- 父div高度不能自适应子div高度
- 限制div高度,内容多了显示滚动条的设计
- 限制div高度当内容多了溢出时显示滚动条
- css 中div不用设定高度,自动根据内容出现滚动条
- byte[]与String转换引起的protobuf反序列化抛异常问题
- GYM 101086 G.Paradise City(水~)
- Servlet自动加载
- static关键字
- 陈大年:创业16年来,我深深意识到,「拼命创业就能成功」是错误的
- 内容滚动条和子div高度自适应
- 蓝桥杯-排他平方数
- java.util.Map接口
- 3月16日计算机课小练
- 九度OJ_1201:二叉排序树
- Linux.网络抓包库libpcap
- 【征集告示】2017年第二届中国江西工艺美术(陶瓷)佳构..
- saxon-he报错
- New 开始~page