css div自适应高度height
DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决。
第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度;
第二种:没有最小高度,DIV完全自适应高度。
以下为大家介绍这两种情况与解决方法
一、一定最小高度,内容加多时自适应高度,而内容少时DIV有一定最小高度 - TOP
有一DIV盒子,默认高度为200px,当DIV里内容多余并超出限定高度时,DIV自适应高度, 要求使用纯CSS+DIV,不需要JS,兼容火狐浏览器
1、回答与解释:
- _height:200px; /* css 注解: 仅IE6设别此属性,假定最低高度是200px ,设置高度200px,内容超出后IE6会自动撑高设定高度 */
- min-height:200px; /* css注释: css最小高度为200px支持所有浏览器,IE6浏览器除外 */
这个设置,ie6,7,8 ,9,10,火狐等都能兼容
2、具体设置代码:
- div{
- _height:200px;
- min-height:200px
- /* css 注释:两个放置不分前后顺序,兼容所有浏览器 */
- }
3、CSS最小高度与自适应高度并存案例
我们设置2个DIV盒子,最小高度均为200px,当内容较少时DIV盒子的最小高度为200px,当内容比较多超出高度能装下时,DIV盒子自适应高度,为了便于观察与参考分析,我们统一设置宽度为100px,一个黑色1px CSS边框。
CSS代码如下:
- div{_height:200px; min-height:200px; border:1px solid #000; width:100px}
- /* css注释:设置最小高度,border边框,宽度 */
HTML代码片段:
- <div>200高度能装下这点内容,设置最小高度200px</div>
- <div>设置最小高度200px<br />
- 而内容多,超出200px高度限制,DIV自适应高度<br />
- <br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位<br />
- 案例占位
- </div>
4、在浏览器案例截图
css自适应高度案例截图
在线演示:查看案例
二、CSS默认自适应高度 - TOP
当我们不对DIV设置固定高度或不设置CSS高度样式,其DIV盒子默认是自适应高度。
三、总结 - TOP
我们不对DIV设置高度样式,默认情况下是自适应高度,当我们需要设置一个CSS最小高度时,所有浏览器都支持DIV盒子最小高度演示,但IE6不支持min-height样式,我们就需要设置针对IE6的css hack实现,或去了解ie6支持min-width max-width,ie6支持min-height max-height。
如需转载,请注明文章出处和来源网址:http://www.divcss5.com/jiqiao/j499.shtml
css div自适应高度height相关推荐
- android h5 div高度自适应,css div自适应高度height
DIVCSS5为大家介绍两种情况下自适应高度样式设置与解决. 第一种:一定高度内容加多时自适应高度,而内容少时DIV有一定最小高度: 第二种:没有最小高度,DIV完全自适应高度. 以下为大家介绍这两种 ...
- css实现多个div自适应高度(一样高)
效果展示: 源码展示: <!doctype html> <html> <head><meta charset="utf-8">< ...
- html中div自适应代码,CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: 左右两侧,左侧固定宽度200px;右侧自适应占满 .box{ width:800px; heig ...
- html的高度自适应,CSS布局自适应高度解决方法
原作者:Alex Robinson 原文标题:Equal Height Columns 这是一个比较典型的三行二列布局,每列高度(事先并不能确定哪列的高度)的相同,是每个设计师追求的目标,按一般的做法 ...
- 解决Div自适应高度的方法(转)
http://www.yutheme.cn/website/index.php/content/view/39/63.html div高度自适应是个比较麻烦的问题,在朋友artery那里看到这个文章, ...
- html css div自适应屏幕宽度,高度
做C/S项目其实最让人蛋疼的无非就是兼容问题,各种浏览器的不兼容外还有div+css不科学的显示问题.所以针对div+css窗口最大化.缩小的自适应加以解决. [html] view plain co ...
- vue div自适应高度
第一种:利用弹性盒子flex特性 <template><div class='container'><div class="divContent"&g ...
- css div自适应宽度
#sidebar { /** 右侧栏 div **/ width : 300px ; float : right ; } # content {/**左侧栏,自 ...
- DIV默认高度且自适应高度
2019独角兽企业重金招聘Python工程师标准>>> 转: 本文和大家重点讨论一下如何控制DIV最小高度又DIV自适高度问题,如果我们需要设置一个div高度,当里面的东西超过这个高 ...
最新文章
- c++新特性11 (12)weak_ptr类定义
- 如何才能成为java高级程序员?
- [转]html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
- python是偏向bs还是cs_CS与BS架构区别、比较、及现状与趋势分析
- 小手工纸盒机器人_亲子手工 | DIY弹珠迷宫小黑手自制玩具系列
- Ajax在IE浏览器会出现中文乱码解决办法
- SQL Server 自增字段归零等问题
- php 将url转成伪静态,php实现url伪静态化,全过程详解
- iptables四表五链及基本使用
- 一劳永逸:服务器专用的软件防火墙
- python实现日历功能_Python用PyQt5界面编程之基本控件QCalendar的使用方法详解
- 部分库函数的自我实现
- Eureka源码-double check单例模式运用
- python用哪种字体比较好_你在用哪种编程字体?
- 计算机技术在医学应用中的论文,浅论计算机技术在医学中的应用.pdf
- 场内场外交易成本_场内基金与场外基金各有什么优劣势?
- 查找所有VOB中mastership的状态
- 基于php+mysql购物商城 校园二手商品 图书鲜花商城 毕业设计(8)商品简介和详情
- 【数据采集】获取网站数据(二)
- 未配置商户号配置怎么设置_设置和配置