如果子元素没有设置 float 属性啥的,父元素就是自动适应子元素宽高的。

子元素如果全是浮动属性(float),那么父元素就没有高度。

除非,你在子元素最后加一个清除浮动( <div style="float:left"><div> ),

或者设置父元素的样式(style="overflow:hidden")

auto是随内容的高度而撑开的。

100%是根据父级元素的高度来决定的。
例如:<div style="height:100px;width:200px;">   <div style="height:auto;width:100px;float:left;">这个容器的高度是随里面的内容的高度而定</div>   <div style="height:100%;width:100px;float:right;">这个容器的高度为父级的高度,100px</div> </div>

如若父级div中的div处于浮动状态。

浮动是会脱离文档流的,内部两个层就不会局限于父层。所以父层不知道内部的高度。但清理浮动,可以把他们“拉”回来。

父DIV加上 zoom:1;overflow:hidden;

height自适应的更多相关文章

  1. height 自适应问题

    何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...

  2. 前端页面div float 后高度 height 自适应的问题

    最近在画项目页面的时候遇到了一个左侧div一旦加上float:left 属性后,设置其高度height:100% 不起作用,后来网上查了半天也没有找到很好的解决方案,只在csdn里发现了这个马上记录下 ...

  3. div height 自适应高度 占满剩余高度的方法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. GridView Item 大小可能不一样,如何保持同一行的Item 高度大小相同,且GridView高度自适应!

    昨天用到GridView,但是遇到几个问题,就是GridView默认的item其实大小是一致的,但是我们经常会遇到item大小不同,系统默认会留白的问题,很头疼!如下图这样的:      就会造成,右 ...

  5. 深入理解和应用display属性(一)

    Display在官方定义:规定元素应该生成的框的类型.本文只重点分析常用的6个值:none.block.inline.inline-block.inherit.flex.其他table.list-it ...

  6. iscroll4 捕捉元素开发手机焦点图滑动效果

    html标准代码格式 <div id="wrapper"> <div id="scroller" > <ul id="t ...

  7. 大前端学习笔记整理【五】rem与px换算的计算方式

    前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要 ...

  8. Echars详解

    简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...

  9. echart------属性详细介绍

    theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d ...

随机推荐

  1. JavaSE_03_Thread类02

    1.1 线程状态概述 当线程被创建并启动以后,它既不是一启动就进入了执行状态,也不是一直处于执行状态.在线程的生命周期中, 有几种状态呢?在API中 java.lang.Thread.State 这个 ...

  2. 留下来做项目经理还是跳槽学Java

    毕业两年了,曾经给自己计划工作两年后跳一次槽,去尝试学习更多的东西.2012年7月5日入职,现在整整两年,最近面临这样的一个抉择:是留在公司继续做项目经理,还是跳槽去学习Java. 我的基本情况:本科 ...

  3. naturalWidth、naturalHeight来获取图片的真实宽高

    一般在图片放大缩小,或动态插入图片时使用 function imagea(img){ var w = img.naturalWidth; var h = img.naturalHeight; } 注: ...

  4. com.microsoft.sqlserver.jdbc.SQLServerException: 将截断字符串或二进制数据。

    遇到这个错误 数据库表结构定义为:varchar(50) 实际插入数据的字符长度超过了50,会引发这种错误. 如果你是debug调试的. 或许你在  getSession().flush();  上报 ...

  5. anaconda安装使用

    Conda是一个开源的包.环境管理器,可以用于在同一个机器上安装不同版本的软件包及其依赖,并能够在不同的环境之间切换 下载:https://mirrors.tuna.tsinghua.edu.cn/a ...

  6. JS字符串的相关方法

    1.字符方法 charAt()和charCodeAt(),都接收一个参数,charAt()返回的是给定位置的字符,charCodeAt()返回的是给定位置字符的字符编码.如: <script&g ...

  7. js作用域的销毁、不立即销毁、不销毁

    JavaScript中的函数执行会形成私有的作用域. (1)作用域的销毁 一般情况下,函数执行形成一个私有的作用域,当执行完成后就销毁了->节省内存空间 (2)作用域的不立即销毁 functio ...

  8. re模块元字符

    #元字符在re模块中有特殊意义的字符,有:^ $. * + {} [] () | \ ^$ #表示开头结尾,注意:[^]表示取反 . #点,表示任意一个字符,包括空格(一个空白字符),\t(换行符). ...

  9. Java问题解读系列之String相关---String类为什么是final的?

    今天看到一篇名为<Java开发岗位面试题归类汇总>的博客,戳进去看了一下题目,觉得有必要夯实一下基本功了,所以打算边学边以博客的形式归纳总结,每天一道题, 并将该计划称为java问题解读系 ...

  10. springmvc 视图解析器工作不正常

    参考了如下 https://blog.csdn.net/typa01_kk/article/details/45902783 今天搭建了一个新的工程,从头开始搞的,处理完发现,能正常进入control ...