如果子元素没有设置 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. Spring的自定义注解简单实现

    1.注解的示例为在方法入参上加后缀 注解代码示例: @Target(ElementType.METHOD) @Retention(RetentionPolicy.RUNTIME) @Documente ...

  2. Make the Most (Hackerrank Codeagon)

    题目链接 Problem Statement Codenation is sending N of its employees to a High Profile Business Conferenc ...

  3. CentOS 6.5 Apache+SVN使用户可以自己修改密码

    yum -y install php #安装php mkdir /var/www/svnadmin #建立页面目录 vi /var/www/svnadmin/index.php #创建index.ph ...

  4. 修改mysql字段类型,修改字段名

    修改字段类型(数据类型,长度,默认值) alter table user modify user_name 类型 修改字段名 方法一:alter table 表 change 旧字段名 新字段名 新数 ...

  5. 从登录接口的响应结果里提取token

    token一般存在于2个地方:1. cookie, 2 ,某个接口的响应结果中 1. 我们接口的token存在于登录接口的响应结果中,如下图: token值 为红色标记的值,在登录接口里加以下2行代码 ...

  6. JDBC2 --- 获取数据库连接的方式二 --- 技术搬运工(尚硅谷)

    /** * 方式二,对方式一的迭代 * 在如下的程序中,不出现第三方的api,使得程序具有更好的可移植性. * @throws Exception */ @Test public void testC ...

  7. Spring Boot实战系列(7)集成Consul配置中心

    本篇主要介绍了 Spring Boot 如何与 Consul 进行集成,Consul 只是服务注册的一种实现,还有其它的例如 Zookeeper.Etcd 等,服务注册发现在微服务架构中扮演这一个重要 ...

  8. 微信小程序之组件的集合(三)

    看看音乐播放组件是如何实现完成的音乐的播放的!!! 一.音乐music组件的开发 1.页面以及页面样式的开发 // music组件页面开发 <view hidden="{{hidden ...

  9. linux apache vhost

    <VirtualHost *:80> DocumentRoot "/usr/www/yltgerp_old/" ServerName erp.yltg.com.cn E ...

  10. nginx链接末尾自动补全斜杠

    放在locaation里边就行 if (-d $request_filename){ rewrite ^(.*[^/])$ $/ permanent;#加斜杠 } 这样,nginx就会进行判断了,如果 ...