如果子元素没有设置 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. Python学习之enumerate

         enumerate还可以接收第二个参数,用于指定索引起始值   2.     注意open返回文件对象,可迭代,而os.open返回的是文件指针,int类型, <wiz_tmp_tag ...

  2. LOJ#3119 随机立方体

    解:极大值至少为1.我们尝试把最大那个数的影响去掉. 最大那个数所在的一层(指一个三维十字架)都是不可能成为最大值的. 考虑容斥.我们试图求除了最大值以外至少有k个极大值的概率. 我们钦定某k个位置是 ...

  3. 洛谷P2333 [SCOI2006]一孔之见

    传送门 辣鸡题目毁我人生败我前程 50分代码 //Achen #include<algorithm> #include<iostream> #include<cstrin ...

  4. Server 主机屋云服务器 宝塔面板 部署nginx反向代理的vue项目

    图文记录云服务器上部署需要nginx反向代理的vue项目: 一.先登录并购买云服务器,根据自己需求购买,此处不详细介绍: 二.登录后如下图,点击进入云服务器界面: 三.在云服务器界面点击管理,进入管理 ...

  5. webpack4.0打包的时候一些技巧

    4.0的webpack要比之前的版本强大的不是一点点 打包的时候也做了很多优化 然后说一些这段时间发现的有趣的技巧 1. 打包出来的文件很大,不知道是什么原因可以用 webpack-bundle-an ...

  6. MyBatis映射器(一)--多参数传递方式

    在mybatis映射器的接口中,一般在查询时需要传递一些参数作为查询条件,有时候是一个,有时候是多个.当只有一个参数时,我们只要在sql中使用接口中的参数名称即可,但是如果是多个呢,就不能直接用参数名 ...

  7. 封装MySQL C API 基本操作

    根据我的以前的文章 http://blog.csdn.net/skyhuangdan/article/details/21099929 链接数据库成功后进行封装. 我封装类使用的是VS2005下的wi ...

  8. 开发者说 | 分布式事务中间件 Seata 的设计原理

    导读 微服务架构体系下,我们可以按照业务模块分层设计,单独部署,减轻了服务部署压力,也解耦了业务的耦合,避免了应用逐渐变成一个庞然怪物,从而可以轻松扩展,在某些服务出现故障时也不会影响其它服务的正常运 ...

  9. OPGL+GLFW+GLEW配置详细步骤

    转载自:https://blog.csdn.net/weixin_40921421/article/details/80211813 本文设计的工具包: 链接:https://pan.baidu.co ...

  10. java httpclient中文乱码解决方案,看注释

    @RequestMapping("getpage") public ModelAndView admin_checkurl(HttpServletRequest request) ...