div 自适应高度 最大高度后滚动条显示
来源:互联网 发布:java 巨杉数据库 编辑:程序博客网 时间:2024/05/21 14:56
背景:为解决这样一种情况:设置div的最大高度为xx%,想要自适应浏览器窗口高度,但是超出div高度的部分,就算设置滚动条scroll或者auto,滚动条也并不会显示出来。而max-height为具体px的则会显示。下面随便弄点代码说明这2种情况:
代码:
<!DOCTYPE html><html><body style="height:100%;"><div style="max-height:10%;overflow:scroll;border:1px solid red;"> <br>why<br>are<br>you<br>so<br>cute<br>!<br>! <br>why<br>are<br>you<br>so<br>cute<br>!<br>!</div></body></html>
效果图:
二、固定最大高度px
代码:
<!DOCTYPE html><html><body style="height:100%;"><div style="max-height:100px;overflow:scroll;border:1px solid red;"> <br>why<br>are<br>you<br>so<br>cute<br>!<br>! <br>why<br>are<br>you<br>so<br>cute<br>!<br>!</div></body></html>
效果:
那么,想要自适应又出现滚动条,就在js里面获取body高度,
<!DOCTYPE html><html><head><script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script> <script> $(document).ready(function(){ var bodyHeight = $("body").height(); $("div").css("max-height","100px");</script> </head><body style="height:100%;"><div style="overflow:scroll;border:1px solid red;"> <br>why<br>are<br>you<br>so<br>cute<br>!<br>! <br>why<br>are<br>you<br>so<br>cute<br>!<br>!</div></body></html>
0 0
- div 自适应高度 最大高度后滚动条显示
- 使用div创建textArea无滚动条高度自适应
- 内容滚动条和子div高度自适应
- div 模拟text area 高度自适应,不要滚动条
- css textarea 高度自适应,无滚动条
- iframe高度自适应及隐藏滚动条
- iframe滚动条隐藏高度自适应
- 【CSS】树结构的滚动条岁内容高度自适应显示,树右边列表宽度自适应
- DIV+CSS固定高度滚动条效果
- DIV自适应高度
- DIV自适应高度解决办法
- div 自适应高度
- 高度自适应div
- div css高度自适应
- div+css自适应高度
- DIV高度自适应窗口
- div并排 自适应高度
- div高度自适应
- Sublime Text 2安装 ftp 破解
- 独立Android开发者开发app如何盈利
- unity手势插件《FingerGestures 》使用入门
- /lib/ld-linux.so.2: bad ELF interpreter解决,同时解决sscanf不能用的问题
- Fedora telnet配置
- div 自适应高度 最大高度后滚动条显示
- NGUI混合FingerGesture《卷一》 统一坐标
- NGUI混合FingerGesture《卷二》分离触摸事件
- 浏览器中调用本地应用程序
- Object-c基础编程学习笔记-内存管理
- 初探设计模式之单例模式
- 为文档扫描仪提供出色的PDF和OCR转换工具ABBYY
- 创建cocos2dx项目时,加载已有游戏时不能真机测试的问题
- ACM整理(二)——1432叠筐