当你设置一个页面元素的高度(height)为100%时，期望这样元素能撑满整个浏览器窗口的高度，但大多数情况下，这样的做法没有任何效果。你知道为什么height:100%不起作用吗？

按常理，当我们用CSS的height属性定义一个元素的高度时，这个元素应该按照设定在浏览器的纵向空间里扩展相应的空间距离。例如，如果一个div元素的CSS是height: 100px;，那它应该在页面的竖向空间里占满100px的高度。

而跟W3C的规范，百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以，如果你把一个div的高度设定为height: 50%;，而它的父元素的高度是100px，那么，这个div的高度应该是50px。

所以需要定义父容器的高度，height:100%是根据父容器来定义的

下面一个弹性盒布局

我们期望的是 头部占一分，主体占八份，底部占一份，但是你会发现并不是你需要的结果

而是

那么如何实现类似webApp中的，头部 主体 底部的布局那

只需要在css中设置html,body的高度

然后你会发现布局变化了，类型webApp的布局

关于height:100%不生效的问题的更多相关文章

  1. 深入理解CSS系列（二）：为什么height:100%不生效？

    对于height属性,如果父元素height为auto,只要子元素在文档流中(即position不等于fixed或者absolute),其百分比值完全就被忽略了.这是什么意思呢?首先来看个例子,比如, ...

  2. 让height: 100%生效

    html: <body> <div class="box"></div> </body> css: .box{ position: ...

  3. 使flex-direction: column的子元素height: 100%生效的办法

    在flex-direction: column子元素里直接使用height:100%,height并不会被设置成100% <!DOCTYPE html> <html lang=&qu ...

  4. height:100% 布局

    常常会碰到需要填满整个浏览器,并且自适应高度的需求.首先肯定会想到给容器设定height:100%,但是会没有效果.原因是body没有高度,所以百分比无法生效. 解决方案:给html,body,标签都 ...

  5. 关于 iframe 在ie11 height:100% 无效的巨坑

    好的,今天公司分配了个解决ie中的bug的任务,其中,有一个就是iframe 的高度 100% 没有生效的问题: 一开始,由于我真的没有怎么去了解过iframe这个货,所以,网上各种搜索一大堆关于这货 ...

  6. css height:100%失效

    有时做移动端页面时,需要用到height:100%来控制,但是设置完后会发现,用百分比的高是不生效的. 经过上网浏览等查阅资料得知,是否可以使用百分比是根据父级对象定义的.所以解决方法就是在body和 ...

  7. 【CSS系列】height:100%设置div的高度

    一.div设置百分百高度实现描述 在html布局中body内第一个div盒子对象设置100%高度height样式,是无法成功显示100%高度的.这个是因为body高度默认值为自适应的,所以及时设置bo ...

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

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

  9. 如何让 height:100%; 起作用---父级元素必须设定高度

    参考: http://www.webhek.com/post/css-100-percent-height.html https://www.cnblogs.com/kunmomo/p/1060066 ...

随机推荐

  1. HashMap深度解析（二）

    本文来自:高爽|Coder,原文地址:http://blog.csdn.net/ghsau/article/details/16890151,转载请注明.       上一篇比较深入的分析了HashM ...

  2. [Android 新特性] 有史来最大改变 Android 5.0十大新特性

    距离Android系统上一次重大更新不到一年的时间,谷歌再一次从KitKat升级到了Lollipop,而两次都使用糖果来命名,营销的目的显露无 遗.当我们首次看到Android 5.0 Lollipo ...

  3. window7访问虚拟机ubuntu中的mysql

    window7上面下载mysql很麻烦,不喜欢,所以改用虚拟机安装ubuntu系统,提供mysql服务. 第一步:下载vmware workstation12, 第二步:下载ubuntu镜像,我用的是 ...

  4. Android 上的一些profiler tools

    cpu这边先配了一个unity自带的profiler https://docs.unity3d.com/560/Documentation/Manual/ProfilerWindow.html 连an ...

  5. 查看MySQL数据库大小

    查看MySQL数据库大小 1.首先进入information_schema 数据库(存放了其他的数据库的信息) ? 1 2 mysql> use information_schema; Data ...

  6. HBase 写优化之 BulkLoad 实现数据快速入库

    在第一次建立Hbase表的时候,我们可能需要往里面一次性导入大量的初始化数据.我们很自然地想到将数据一条条插入到Hbase中,或者通过MR方式等.但是这些方式不是慢就是在导入的过程的占用Region资 ...

  7. Hyper-V Tools for win7

    http://download.microsoft.com/download/C/1/C/C1CA233D-CA1A-4C4D-8240-B4AFC0FD3433/Windows6.1-KB95883 ...

  8. Codeforces 553B Kyoya and Permutation

    problem 题意 本题题意不太easy看懂. 给定一个序列,我们能够把这个序列变成一些循环置换的和.然而这样的置换的方法是不止一种的.我们定义一种standard cyclic represent ...

  9. &lt;十&gt;读&lt;&lt;大话设计模式&gt;&gt;之观察者模式

    观察者模式也是比較简单的一种模式,可能从名字上理解无法明确,但真正理解其含义之后就非常easy了,说实话在自己来发的项目中自己也用到过.仅仅只是不知道它叫观察者罢了,仅仅要懂面向对象的对继承多态理解非 ...

  10. android Menory 小结

    不建议在Activity中使用static 变量,考虑使用Application.当然,static final例外 但Application也不要cache某个Activity使用的View,如果c ...