百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

如何解决div的高自适应问题(css设置div高度自适应)

yuyutoo 2025-04-06 00:10 4 浏览 0 评论

一、DIV高度自适应(父div高度随子div的高度改变而改变)

1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改变。

代码:

<styletypestyletype="text/css">

#aa{border:#000000solid5px}

#bb{border:#00ffffsolid5px;}

#cc{border:#0033CCsolid5px}

</< span>style>

父div

子div</< span>div>

子div</< span>div>

</< span>div>

效果:IE、FF下一致

2、如果父div定义height,子div均为标准流的时候,在IE下父div的height随内容变化而变化,ff中则固定大小,如父div设置height:50px

代码:

<styletypestyletype="text/css">

#aa{border:#000000solid5px;height:50px}

#bb{border:#00ffffsolid5px;}

#cc{border:#0033CCsolid5px}

</< span>style>

父div

子div</< span>div>

子div</< span>div>

</< span>div>

IE效果

FF下效果

3、如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both

未加空div代码:

<styletypestyletype="text/css">

#aa{border:#000000solid5px;}

#bb{border:#00ffffsolid5px;float:left}

#cc{border:#0033CCsolid5px;float:left}

</< span>style>

父div

子div</< span>div>

子div</< span>div>

</< span>div>

IE效果:

FF效果:

修改后代码:

<styletypestyletype="text/css">

#aa{border:#000000solid5px;}

#bb{border:#00ffffsolid5px;float:left}

#cc{border:#0033CCsolid5px;float:left}

</< span>style>

父div

子div</< span>div>

子div</< span>div>

</< span>div>

</< span>div>

修改后效果:IEFF一致

4.另类的DIV高度自适应

原理:

padding-bottom将列拉长变的一样高,而负的margin-bottom又使其回到底部开始的位置,同时,溢出部分隐藏掉了。此方法必须加文档信息才能正常显示

代码:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml">

<styletypestyletype="text/css">

#aa{border:#000000solid5px;overflow:hidden;}

#bb{border:#00ffffsolid5px;float:left;

padding-bottom:100000px;margin-bottom:-100000px;}

#cc{border:#0033CCsolid5px;float:left;

padding-bottom:100000px;margin-bottom:-100000px;}

#dd{float:left}

</< span>style>

子div</< span>div>

子div</< span>div>

子div




</< span>div>

</< span>div>

效果:

二、DIV高度自适应(子div高度随父亲div高度改变而改变)

在有边框的情况下,你会发现同一个div,在IE下的高度和在FF下的高度是不一样的,比如你设置了高度为100px的div,边框是border:5px;IE的高度是5+5+空白区域=100px,而FF下高度是100px的div是不包括高度的,只是空白区域的高度,如下图黑框的部分:

黑框的上方是对齐的,但是设置了同样的高度,效果却不一样,代码如下:

<styletypestyletype="text/css">

#aa{border:#000000solid5px;height:100px;}

#bb{border:#00ffffsolid5px;float:left;height:100%}

#cc{border:#0033CCsolid5px;float:left}

</< span>style>

子div</< span>div>

子div</< span>div>

</< span>div>

如果没有设置边框,完全没有高度不一致的情况,子div适应父div很简单,如上面代码,只是在子div加了height:100%属性即可。如果设置了边框,可以把子div的高度设置为比父div小上下边框高度的值,比如在此例中,可把#bb中height改为100-5-5=90px,结果在IE和Mozilla中显示一致。

有一点要注意,如果父div是body的话,也就是说一个body套了一个div,让div适合body的大小的,必须设置body的高度才能实现子div随body改变而改变,body{height:100%}

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

相关推荐

刚买的阿里云服务器怎么用(阿里云服务器买完如何使用)

刚买的阿里云服务器怎么用?阿里云服务器在购买之后,需要进行一些操作,比如配置安全组,修改密码,安装软件,导入数据库等。具体如下:1.买了云服务器,第一件事就是重置密码。登录云主机控制台,可以在服务器管...

在阿里云 腾讯云上创建MySQL云数据库只需9步

与自建数据库相比,采用云数据库的优势是减少对数据库的运维任务。云数据库支持MySQL、SQLServer、MongoDB等多种数据库类型。下面看看如何设计高可用的云数据库。...

本地搭建简单的Kubernate实验环境并安装数据库

因为dockerhub的限制,这个工作还是有些麻烦的,在这里把过程分享给大家。由于是本地部署并且用于学习和实验,所以使用minikube1.安装docker最新版本的docker方法见链接:...

阿里云服务器安装宝塔面板教程,配置及错误解决方法全攻略

阿里云服务器安装宝塔面板,虽然教程很多,但估计你都看得云里雾里,不太明白,这也是我写这一批文章要解决的问题,将各种问题和配置方法分享,希望能对您有帮助。本文适合想要做网站的站长、技术爱好者,服务器管理...

Aliyun ecs上安装Mysql(yum mysql安装)

安装环境:阿里云ECS+操作系统ubuntu+mysql我这里直接就使用网上安装,输入如下的指令sudoapt-getinstallmysql-server注意:在安装的过程会要输入两次密码,...

阿里云服务器 centos 8 安装MYSQL

1、环境安装yumsearchlibaioyuminstalllibaioyum-yinstallnumactlyuminstalllibnumayuminstallld...

女人要当心 吃越少毛病越多?孕二月的妈咪营养关注?excel2003?

对身体过瘦的人来说,体内脂肪和蛋白质均供应不足,因此头发频繁脱落,发色也逐渐失去光泽。如果过分节食,头发则缺乏充足的营养补给,其中包括缺少铁的摄入,便会枯黄无泽,最后导致大量脱发。体瘦的女性髋骨骨折发...

新一代福克斯RS正式发布搭2.3T动力四驱

新一代福克斯RS正式发布搭2.3T动力四驱来源:经销商供稿日期:2015-02-20全新一代福克斯RS搭载了一台2.3TEcoBoost四缸涡轮增压发动机,并首次配备了拥有多片离合器的四驱系统。日...

两栏布局、左边定宽200px、右边自适应如何实现?

一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:...

8个前端面试的题目(前端面试题2020及答案 知乎)

一、行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素:divph1h2h3h4formul行内元素:abbrispaninputselectCss盒模型:内容,bo...

CSS中清除浮动的几种方法,快来学习一下吧

前言首先我们通过一张图来解释下元素浮动是什么样的状态。元素浮动情况上图的html部分代码为:html代码css部分代码为:css代码通过上面的图片可以看出,当内部的div设置float后,外部的元素的...

前端兼容性问题总结(前端常见的兼容性问题)

1.如何在IE6及更早浏览器中定义小高度的容器?IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高。解决:#test{overflow:hidden;height:1px;fon...

关于浮动清除的一些小感悟,4种方法清除浮动

如何脱离标准文档流,css中给了三种方法,使一个元素脱离标准文档流。1.浮动。2.绝对定位。3.固定定位。一、什么是浮动呢?定义这样说:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一...

从abc起步学做网站(4)(从abc开始学英语)

现在我们有了个网站index.htm,并且绑定了域名(没有买域名的同学可以继续用空间商送的免费的,一样学),这一篇我们扩充网站index.htm的内容,并且排版。首先说怎么添加图片,在网上随便找个好看...

如何解决div的高自适应问题(css设置div高度自适应)

一、DIV高度自适应(父div高度随子div的高度改变而改变)1、如果父div不定义height、子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改...

取消回复欢迎 发表评论: