如果子元素没有设置 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. 自动化运维工具Ansible工具

    目录 一.初识Ansible 二.Ansible的架构 三.Ansible基础使用 安装 主机清单 管理主机 四.Ansible用脚本管理主机 五.Ansible模块Module 六.Ansible常 ...

  2. charles for https

    To remotely capture http or https traffic with charles you will need to do the following: HOST - Mac ...

  3. 关于开启Eureka安全Security认证后,客户端死活注册不上的问题

    遇到一个问题"开启Eureka服务端的安全认证后,客户端死活注册不到Eureka上",已经尝试了以下办法,完全搞不定... 客户端出错的版本: spring-boot:2.0.3. ...

  4. docker 安装redis 并配置外网可以访问 - flymoringbird的博客 - CSDN博客

    原文:docker 安装redis 并配置外网可以访问 - flymoringbird的博客 - CSDN博客 端口映射,data目录映射,配置文件映射(在当前目录下进行启动). docker run ...

  5. Springboot 之 启动报错-Cannot determine embedded database driver class for database type NONE

    Springboot 之 启动报错-数据库 springboot项目在启动时,报如下错误: Error starting ApplicationContext. To display the auto ...

  6. 粗浅看 Tomcat系统架构分析

    原文出处: 吴士龙 http://www.importnew.com/21112.html Tomcat的结构很复杂,但是Tomcat也非常的模块化,找到了Tomcat最核心的模块,就抓住了Tomca ...

  7. 一些linux"基本操作"的教程汇总

    linux有些操作不用经常忘掉,如果忘掉还要到处找教程,所以想干脆汇总一些写的比较好的教程,免得下次再去找(完全个人向) 1. guake terminal http://blog.csdn.net/ ...

  8. c++使用优先队列时自定义优先出队顺序(和sort)

    优先队列也是一种先进先出的数据结构,元素从队尾入队,从队头出队,但是优先队列相较一般队列多了一个判断优先级的功能,在当前队列中,优先级最高的元素将被第一个删除. 先看一下优先队列的定义 templat ...

  9. 基于MaxCompute打造轻盈的人人车移动端数据平台

    摘要: 2019年1月18日,由阿里巴巴MaxCompute开发者社区和阿里云栖社区联合主办的“阿里云栖开发者沙龙大数据技术专场”走近北京联合大学,本次技术沙龙上,人人车大数据平台负责人吴水永从人人车 ...

  10. GIL(全局解释器锁) 理解

    GIL 锁,全局解释器锁,作用就是,限制多线程同时执行,保证同一时间内只有一个线程在执行. ​ 线程非独立的,所以同一进程里线程是数据共享,当各个线程访问数据资源时会出现竞状态,即数据可能会同时被多个 ...