html div自动高度,CSS技巧:3种常用方法解决div列高度自适应
本文向大家介绍一下解决div列高度自适的3种常用方法,分别是利用“clear:both”背景填充,使用脚本控制高度和margin负值父子容器高度继承三种。
CSS技巧:解决div列高度自适的3种常用方法
解决div列高度自适的方法有很多种,这里介绍三种最常用的方法给大家(下面所有例子以父main,子divleft、divright为例)。
1、利用“clear:both”背景填充(推荐!!!)
这是使用最广泛的一种做法,我一直都用此方法解决div列高度自适问题。三行二列布局,主要内容在右边,网页宽度780px,左列240px,右列540px。
CSS代码:
#main{
width: 780px;
margin: 0;
background: url(bg.gif) #FFFFFF repeat-y left;
text-align: left;
}
#divleft{
float: left;
width: 240px;
}
#divright{
float: right;
width: 540px;
}
.clear{
border-top:1px solid transparent !important;
margin-top:-1px !important;
border-top:0;
margin-top:0;
clear:both;
visibility:hidden;
}
html代码:
div>
div>
div>
div>
优点:无hacks,完全的自适应高度。
2、脚本控制高度 ..
在中加入如下代码(假设divright的高度相对***):
document.getElementById"divleft").style.height
=document.getElementById"divright").scrollHeight "px"
script>
优点:代码超级简单
缺点:要确定有某一列的高度始终是相对***的,此方法比较被动。
3、margin负值父子容器高度继承
这个方法能较好地解决列高度相同的问题。三行二列布局,主要内容在左边,网页宽度780px,左列540px,右列240px。
CSS代码:
#main{
width: 540px;
float:left;
background:#FFFFFF;
text-align:left;
}
#divleft{
width: 540px;
float: left;
position:relative;
margin-left:-540px;
}
#divright{
width: 240px;
float: right;
position:relative;
margin: 0 -240px 0 0;
background: #F0F0F0;
}
html代码:
div>
div>!
div>
或许刚接触的Web Standards的朋友对这种方法不怎么理解,现Blank分析一下:
[A]
[B][C]
上结构中a包含c,c包含b。当b的高度为***时,那么a和c将继承b的高度,如果a和b位置重合,将显示b的背景;而当c的高度***时,那么a继承将继承c的高度,如果a和b位置重合,将显示a的背景。这样无论b***或者c***都将显示div列高度相同。
优点:兼有***种方法的优点,并且比***种方法的代码稍微简洁。
缺点:整体结构只能左对齐。
【编辑推荐】
【责任编辑:程华权 TEL:(010)68476606】
点赞 0
html div自动高度,CSS技巧:3种常用方法解决div列高度自适应相关推荐
- 四种方法解决DIV高度自适应问题
四种方法解决DIV高度自适应问题 参考文章: (1)四种方法解决DIV高度自适应问题 (2)https://www.cnblogs.com/smght/p/4505614.html 备忘一下.
- CSS元素高度塌陷的几种常见解决办法!
同学们在进行页面布局的时候,经常会使用到float浮动进行样式控制,但如果我们没有设置父元素的高度的时候使用浮动就会导致后面的子元素出现问题,也就是高度塌陷.下面小千就给大家介绍几种常见的解决CSS高 ...
- 【css】5种方法实现div居中(自用)
越简短的排越前,复制粘贴用 1.父元素使用grid,父设定place-content .parent {display: grid;place-content: center; } 2.父元素使用gr ...
- css出现的问题以及解决,div+css的浮动常出现的问题以及解决办法_html/css_WEB-ITnose...
今天终于有空写篇文章了,如果有不对的还请大家多多指正,只是想让初学者少走点弯路,当初我学的时候到处碰壁,一些很简单的问题如题"div+css的浮动"被一些牛X人物写的多么的深奥,我 ...
- 禁止div被拖动 css,【Web前端问题】div在拖动时出现禁止图标
代码结构: js代码: drag_append:function(){ var self = this; var appender = null; $('.ullis').find('.lis').o ...
- 让div水平居中的css方法
一:让div水平居中的css方法:(默认情况下div的display为block,以下是针对display:block来说的) 1.给要设置水平居中的div设置display:block ,marg ...
- 引入css的方式的四种方式,引入css的四种方式
1.内联式引用:直接用在标签上,但维护成本高 style='font-size:16px;color:#000000' 2.外部连接式引用:css代码与html代码分离,便于代码重复使用 style. ...
- 如何让图片按比例响应式缩放、并自动裁剪的css技巧
如何让图片按比例响应式缩放.并自动裁剪的css技巧 同时也适用于一些轮播父容器响应式缩放 响应式网站.移动端页面在DIV CSS布局中对于图片列表或图片排版时, 如果想要图片按比例缩放, 最简单的就是 ...
- 分析div自动适应浏览器的高度
前端人员之间有一个普遍存在的问题,如何让一个div的高度自动延伸到浏览窗口100%的高度,在布局中,我们有时会用到高度自适应,例如,我们定义了一个 div,并且希望它的高度为窗口高度的100% ,那么 ...
最新文章
- R语言与数据分析(2)-R语言简介
- 手把手教你搭建AI开发环境 !(附代码、下载地址)
- tf2.0环境下“module ‘tensorflow‘ has no attribute ‘log‘”的解决办法
- Sentinel: 分布式系统的流量防卫兵 1
- 全球 化 化_全球化设计
- 【LCT】【树状数组】Matches Are Not a Child‘s Play(luogu CF1137F)
- Palo Alto Networks 支持仪表盘漏洞泄露数千份客户支持工单
- 后端已经配置 前端还是报cors错误怎么回事_换一种姿势挖掘CORS漏洞
- VirtualPC2007添加Shared Folder的方法for dos
- python中元组的赋值_在Python中,元组可以被赋值修改。( ) (2.0分)_学小易找答案...
- 用树莓派USB摄像头做个监控
- 物联网和互联网之间,在本质上有什么区别?
- [项目分享]JSP+Servlet+JDBC实现的shine网上书城
- 安霸Ambarella_海思Hisilicon_AI芯片参数对比
- 动态管理电源功能 计算机 中标,东北石油大学省创新基地奖励金设备仪器采购第四标段:黑龙江省油气田控制与动态监测实验室中标公告2020-11-11...
- SpringMVC:返回HTML页面
- wndr3700刷openwrt变砖恢复
- rand()函数100000随机数_Excel 核心函数篇:常用随机数生成函数
- origin2019插入图片_Origin绘图时在新图层中添加新图的方法
- smbms超市管理系统项目总结
热门文章
- TV HD android,X95H 系列 | 4K Ultra HD |Android TV | Sony HK
- 【干货】黄蔚欣:数据、行为与建筑设计
- 为什么KEYNOTE导出HTML很大,给keynote文件瘦身
- Linux 网卡 bond 的七种模式详解
- 【虚幻引擎UE】UE4/UE5 功能性插件推荐及使用介绍 2
- Codeforces Round #703 (Div. 2) D. Max Median
- android获得系统自带颜色,这些Android系统样式中的颜色属性你知道吗?
- Spring Cloud Alibaba 0.9.0 升级到 2.1.0 手把手教程
- TCP四次挥手会经历这么多状态
- LCD 时间参数与crt显示器联系