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>

auto是自动默认高度- -!height：100%的话如果你父级有height的话就是父级的高度

这么说，比如一个表格在另一个表格里面，如果外面的表格高是100，里面表格当是auto的时候，如果表格里面没有东西，它就没有高度，表格里面的内容有多高，它就有多高，而当是100%的时候，无论里面有没有内容，它都和外面的表格是一样高的

CSS，height:auto和height:100%有什么区别？的更多相关文章

  1. width:auto 和 width:100%有什么区别

    width:auto 和 width:100%有什么区别 宽度计算不同 <div class="parent"> <span class="child& ...

  2. div+css中height:auto !important; height:663px; min-height:663px !important;区别

    height:auto !important是高度自适应,主要的是,!important只是对于ie6不认识而已,其他浏览器都是以这个为最高的优先级,执行这个,ie6会无视这个,不是只有火狐而已hei ...

  3. css height:100%和height:auto的区别

    css height:100%和height:auto的区别 height:auto,是指根据块内内容自动调节高度.height:100%,是指其相对父块高度而定义的高度,也就是按照离它最近且有定义高 ...

  4. css top,right,bottom,left设置为0有什么用？它和width:100%和height:100%有什么区别？

     壹 ❀ 引 当我们使用position属性时,总免不了与top,left,right,bottom四个属性打交道,那么这四个属性都设置为0时有什么用,与宽高设置100%又有什么区别?本文对此展开讨论 ...

  5. height:100%和height:auto的区别

    一直不明白height:100%和height:auto的区别,最近在制作前端页面时都用了height:100%;overflow:hidden; ,可是有些浏览器出现莫名的奇妙的问题,但换成heig ...

  6. js不需要知道图片宽高的懒加载方法（经过实际测试，不加宽高仍然是无法正常加载的，设置height:auto,height:100%，仍然显示高度为0）

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  7. 如何为不定高度(height:auto)的元素添加CSS3 transition-property:height 动画

    但一个元素不设置height时,它的默认值是 auto,浏览器会计算出实际的高度. 但如果想给一个 height:auto 的块级元素的高度添加 CSS3 动画时,该怎么办呢? 从 MDN 的可以查到 ...

  8. height:auto 火狐没边框

    css高度设置为auto后,设置的边框 ie正常 火狐 就没有边框了,解决方法 之前是这样写的 #right_bottom { width: 790px; height:auto; border: # ...

  9. CSS布局与定位——height百分比设置无效/背景色不显示

    CSS布局与定位——height百分比设置无效/背景色不显示 html元素属性width和height的值有两种表达方式,一是固定像素如“100px”,一是百分比如“80%”, 使用百分比的好处是元素 ...

随机推荐

  1. 【 VS 插件开发 】一、正确安装VS专业版

    [ VS 插件开发 ]一.正确安装VS专业版

  2. CodeForces 676D Theseus and labyrinth

    最短路. $dis[i][j][k]$记录到点$(i,j)$,门的状态为$k$时的最短路.转移的时候有$8$种方案,即直接走向周围四个点,或者进行旋转.比较烦的是判断两个相邻的点在状态$k$下是否连通 ...

  3. GL应用方面

    1.图和表 2.计算机辅助设计CAD 3.虚拟现实环境 4.数据可视化 5.教学与培训(基于VR) 6.计算机艺术 7.娱乐 8.图像处理 9.用户界面

  4. html和html5学习

    html和html5学习 chorme.safari中的input或textarea html超链接(a)详细讲解 html5新增及删除标签 html表格 图片加alt属性 input的type属性 ...

  5. 解决IE兼容总汇【转】

    转载声明: 藏羚羊 2014年04月16日 于 前端开拓者 发表 本文固定链接: http://www.frontopen.com/2552.html 1. <meta http-equiv=“ ...

  6. F9 开发之左树右表中的左树

    1 首先在前端应用树树控件 <div class="fui-left"> <div role="head" title="地区选择& ...

  7. 关于Python2字符编码的体会

    对于Python的字符编码问题也懵了很久,最近做爬虫多次遇到网页转码的问题,干脆彻底解决掉!Just Do it! 1.两种类型str与unicode str和unicode都是basestring的 ...

  8. PHP22期基础班技术总结

  9. js的兼容技巧

    javascript原生代码中经常会遇到各式各样浏览器不兼容的问题,浏览器真是倔强,解决浏览器的兼容是前端猿们的一大难题 为了避免在工作中遇到这些简单的问题.节约开发时间,在这里总结一些常用的浏览器兼 ...

  10. 打开myeclipse2014的包资源管理器

    网上查到的方法不太适用于myeclipse2014,我就自己试了一下下 结果是:windows->show view->general->project package 结果: 希望 ...