父类div高度适应子类div
父类div高度适应子类div
通常有许多div的高度由子类的高度决定父类的高度,所以需要父类div要适应子类div的高度,一般情况父类的高度可以直接设置成“auto”即可。
在有的情况下,子类div会撑破父类div.


所以需要走一些调整。通常有3种方法对高度进行调整:
方法一:直接设置父类高度(不过通常不适用)


方法二:清除浮动属性


方法三:


-----------------------------
个人经常忘记浮动属性,导致排版出现问题。所以喜欢将 内部有浮动属性的div添加一个border属性,这样就可以清楚的看到原因了。
父类div高度适应子类div的更多相关文章
- div高度自适外层div高度随里层div高度自适
尝试过许多办法 其中一网友的最靠谱就是在外层div样式添加两个标签(不能少) clear:both; overflow:auto;
- 四种方法解决DIV高度自适应问题
本文和大家重点讨论一下解决DIV高度自适应的方法,这里主要从四个方面来向大家介绍,相信通过本文学习你对DIV高度自适应问题会有更加深刻的认识. DIV高度自适应 关于DIV高度的自适应,一直是个让人头 ...
- DIV高度自适应及注意问题(转)
本文和大家重点讨论一下DIV高度自适应及注意问题,主要包括父div高度随子div的高度改变而改变和子div高度随父亲div高度改变而改变两种情况. DIV高度自适应及注意问题 积累了一些经验,总结出一 ...
- css中div高度自适应
高度的自适应(父div高度随子div的高度改变而改变) 1.如果父div不定义height.子div均为标准流的时候,父div的height随内容的变化而变化,实现父div高度随子div的高度改变而改 ...
- 如何设置div高度为100%
div高度通常都是固定值,直接将div高度设为100%是无效的,那么如何设置才能有效呢? 直接给div设置height:100%即可,无效的原因一定是父元素的高度为0,最常见的就是给body的直接元素 ...
- 如何让两个 并列的div高度相等
哪个div Height值大,就将其值赋给Height值小的div,从而使2个div高度始终保持一致. function $(id){ return document.getElementById(i ...
- div高度自适应(总结:min-height:100px; height:auto;的用法)
对于div高度自适应问题,我总是用一句话:height:auto来解决. 但是很多时候我们需要的是当div内部有内容时,高度会随着内容的增加和增加,当div中没有内容时,div能够保持一个固定的高度. ...
- html 关于内部是float元素的外部div高度为0的解决方法!
最近编写一个页面的时候遇见一个问题,外部div是block的,而内部元素是float的,大家应该都知道float的元素是没有实际高度的,就算你设置了float元素的高度他也不会撑开外部block元素的 ...
- div高度自适应
第一种: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...
随机推荐
- 用vue.js学习es6(三):数组、对象和函数的解构
一.数组的解构: 以前的方式: var arr = [1,2,3]; console.log(arr[0]); //1 console.log(arr[1]); //2 现在的方式: var [a,b ...
- 如何解决ajax重复提交的问题
如下一段代码: 先忽略我没引jquery.js的问题,这是一个案例. 当我们点击提交时,控制台输出两次e,在network里查看,可以看到我们的ajax传输了两次,造成了数据重复提交. 一种解释为bu ...
- localStorage使用总结
一.什么是localStorage.sessionStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题 ...
- c# Using Settings under visual studio 2012
1.在项目属性中的Settings的设置可以通过以下方式调用 Properties.Settings.Default.(SpecifyPropertyName) 2.添加新的Settings设置文件 ...
- 将文件移出版本控制 (Revision Control)
两条重要的 Git 命令: git rm -r -n --cached /path/to/the/directory git rm -r --cached /path/to/the/directory ...
- Oracle 的字符集与乱码
字符集问题一直叫人头疼,究其原因还是不能完全明白其运作原理. 在整个运行环节中,字符集在3个环节中发挥作用: 1.软件在操作系统上运作时的对用户的显示,此时采用操作系统定义的字符集进行显示.我们在系统 ...
- SVN服务器搭建
一.SVN下载:https://tortoisesvn.net/downloads.html,下载安装步骤百度一下,基本上都是一路点击next即可安装完成. 服务端安装文件: 二.测试是否安装成功,在 ...
- MyEclipse部署web项目到Tomcat出现An internal error occurred during: "Launching on Tomcat 7.x"的问题
如果出现了上述的错误按照如下的3个步骤解决:1.首先关闭MyEclipse工作空间.2.然后删除工作空间下的文件."MyEclipse10\workspace.metadata.plugin ...
- 387. First Unique Character in a String
Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...
- mysql5.x升级到mysql5.7后导入之前数据库date出错的快速解决方法【mysql低版本数据导入到高版本出错的解决方法】
mysql5.x升级至mysql5.7后导入之前数据库date出错,这是由于MySQL的sql_mode的影响,解决方法如下所示: [具体参考:mysql的sql_mode详解]修改mysql5.7的 ...