height自适应
如果子元素没有设置 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自适应的更多相关文章
- height 自适应问题
何为高度自适应? 高度自适应就是高度能跟随浏览器窗口的大小改变而改变,典型的运用在一些后台界面中上面一栏高度固定用作菜单栏或导航栏,下面一栏高度自适应用于显示内容.高度自适应不像宽度自适应那样简单,在 ...
- 前端页面div float 后高度 height 自适应的问题
最近在画项目页面的时候遇到了一个左侧div一旦加上float:left 属性后,设置其高度height:100% 不起作用,后来网上查了半天也没有找到很好的解决方案,只在csdn里发现了这个马上记录下 ...
- div height 自适应高度 占满剩余高度的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- GridView Item 大小可能不一样,如何保持同一行的Item 高度大小相同,且GridView高度自适应!
昨天用到GridView,但是遇到几个问题,就是GridView默认的item其实大小是一致的,但是我们经常会遇到item大小不同,系统默认会留白的问题,很头疼!如下图这样的: 就会造成,右 ...
- 深入理解和应用display属性(一)
Display在官方定义:规定元素应该生成的框的类型.本文只重点分析常用的6个值:none.block.inline.inline-block.inherit.flex.其他table.list-it ...
- iscroll4 捕捉元素开发手机焦点图滑动效果
html标准代码格式 <div id="wrapper"> <div id="scroller" > <ul id="t ...
- 大前端学习笔记整理【五】rem与px换算的计算方式
前言 这段时间的小项目中算是真正意义上使用了rem来进行移动端的页面布局,项目结束了我反思了一下之前的对于rem的使用...原来我以前对rem用法完全是在搞笑啊!!结合这次这个小项目,我觉得我也有必要 ...
- Echars详解
简介 ECharts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,可以流畅的运行在PC和移动设备上,兼容当前绝大部分浏览器(IE6/7/8/9 /1 ...
- echart------属性详细介绍
theme = { // 全图默认背景 // backgroundColor: 'rgba(0,0,0,0)', // 默认色板 color: ['#ff7f50','#87cefa','#da70d ...
随机推荐
- java虚拟机(十三)--GC调优思路
GC调优对我们开发人员来说,如果你想要技术方面一直发展下去,这部分内容的了解是必不可少的,jvm对于工作.面试来说都很重要,GC调优的问题 更是重中之重,因为是对你jvm学习内容的实践,知识只有应用实 ...
- vue中使用vue-echarts
一.先说在原生里怎么使用echarts <!-- 1.引入echarts文件 --> <script src="echarts.min.js"></s ...
- linux学习(四)-----linux常用指令
touch 指令 touch 指令创建空文件 基本语法 touch 文件名称 应用实例 案例 1: 创建一个空文件 hello.txt cp 指令 cp 指令拷贝文件到指定目录 基本语法 cp [选项 ...
- linux 三剑客命令(grep,sed ,awk)
grep 命令 :强大的文本’搜索’工具 1.grep -n 'word' file_name 在file_name文件中找到word所在的所有行并显示.-n 为显示行号. 2 ...
- umask权限使用
很显然,系统中各种文件的权限设置对特定用户的数据安全有很大影响.但是要求用户逐一明确设置系统中每个文件的权限也是不现实的,为此,需要使用umask命令,该命令可以为用户账号中新文件的创建进行缺省设置. ...
- 不同尺寸设计图 rem 断点数据记录
320px宽的设计图 @media screen and (min-width: 320px) { html { font-size: 100px; } } @media screen and (mi ...
- shell mysql数据迁移/备份
保存为.sh文件,配置运行即可 #!/bin/bash #### change the values below where needed..... #### 多数据库DBNAMES="My ...
- java笔记之split
Java split()用法 特殊情况有 * ^ : | . \ 一.单个符号作为分隔符 String address="上海\上海市|闵行区\吴中路"; String[] sp ...
- Jboss配置HTTPS
配置jboss的HTTP请求走SSL(HTTPS协议) l 生成keystore 文件 用keytool生成server.keystore文件: 进入命令行 C:\Documents ...
- 为什么打不开IDEA或webStorm官方网页?
为什么打不开IDEA或webStorm官方网页? 一.问题描述 idea和webStorm的官网:https://www.jetbrains.com/ 有时候打开idea的官网会出现无法访问的情况,页 ...