Try setting the height of the html element to 100% as well.

html, body
{
height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have it's height set as well.

However the content of body will probably need to change dynamically. Setting min-height to 100% will accomplish this goal.

html{
height: 100%;
}
body {
min-height: 100%;
}

from:http://stackoverflow.com/questions/6654958/make-body-have-100-of-the-browser-height

Make body have 100% of the browser height的更多相关文章

  1. WPF 中如何变相让 ListBox 宽度(Width) 100%,高度(Height) 100%,从而达到 Filled 的效果

    直接贴代码了: XAML: <Window x:Class="HelloWorld.MainWindow" xmlns="http://schemas.micros ...

  2. height:100% 布局

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

  3. 由html,body{height:100%}引发的对html和body的思考

    html,body{height:100%} 今天看到一个CSS样式:html,body{height:100%},第一次看到,感觉挺奇怪,为什么html还需要设置height:100%呢,html不 ...

  4. 关于html,body{height:100%}的解释

    来源:https://www.cnblogs.com/QianBoy/p/8571682.html 今天看到一个CSS样式:html,body{height:100%},第一次看到,感觉挺奇怪,为什么 ...

  5. 解决html设置height:100%无效的问题

    通常我们需要让自己的网页内容能够更好的适配各种屏幕大小,会采用height:100%,但是我们发现问题出来了,height:100%无效,其实解决办法很简单 解决:你只需要在css处添加上html, ...

  6. 关于height:100%

    要想高度百分比起作用,一般来说,要满足两个条件:其一,父标签有高度可寻,就是向上遍历父标签要找到一个定值高度(body,html另外讨论),如果中途有个height为auto或是没有设置height属 ...

  7. jQuery中的100个技巧

      1.当document文档就绪时执行JavaScript代码. 我们为什么使用jQuery库呢?原因之一就在于我们可以使jQuery代码在各种不同的浏览器和存在bug的浏览器上完美运行. < ...

  8. 关于Div的宽度与高度的100%设定

    http://www.cnblogs.com/clare-zhang/archive/2011/08/26/2154220.html 正像你所知道的那样,设置DIV大小的有两个属性width和heig ...

  9. jquery 之height(),innerHeight(),outerHeight()方法区别详解

    在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight().outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width() ...

随机推荐

  1. kafka consumer 分区reblance算法

    转载请注明原创地址 http://www.cnblogs.com/dongxiao-yang/p/6238029.html 最近需要详细研究下kafka reblance过程中分区计算的算法细节,网上 ...

  2. storm的acker机制理解

    转载请注明原创地址http://www.cnblogs.com/dongxiao-yang/p/6142356.html Storm 的拓扑有一些特殊的称为"acker"的任务,这 ...

  3. PostgreSQL9.5 新特性

    PostgreSQL9.5 新特性 PostgreSQL9.5:Foreign Table Inheritance PostgreSQL9.5:Row-Level Security Policies ...

  4. TortoiseSVN客户端重新设置用户名和密码[转]

    在第一次使用TortoiseSVN从服务器CheckOut的时候,会要求输入用户名和密码,这时输入框下面有个选项是保存认证信息,如果选了这个选项,那么以后就不用每次都输入一遍用户名密码了. 不过,如果 ...

  5. 非常全面的java基础笔试题

    下面是java基础笔试题,当时我去笔试,做了1个小时(80道选择题,后面的简答题就没时间做了),结果很吓人,太挫了,最后被面试官忽悠去培训去了,呵呵.我偷偷把面试题弄了下来,用来学习吧,也希望能对你们 ...

  6. 【转】正确使用Block避免Cycle Retain和Crash

    原文地址:http://tanqisen.github.io/blog/2013/04/19/gcd-block-cycle-retain/ 使用指南:http://blog.csdn.net/nic ...

  7. jdk1.5多线程Lock接口及Condition接口

    jdk1.5多线程的实现的方式: jdk1.5之前对锁的操作是隐式的 synchronized(对象) //获取锁 { } //释放锁 jdk1.5锁的操作是显示的:在包java.util.concu ...

  8. android开发之SwipeListView的使用

    实现一种类似于qq中滑动列表的功能: 向左或者向右滑动,然后执行相关操作. 这里用到的是GitHub上的开源控件SwipeListView,下载地址https://github.com/47deg/a ...

  9. Sublime Text使用心得(一)

    以前写web前端样式都是用eclipse.myeclispe这些IDE开发工具,现在想纯粹的写点HTML的东西,一心想找一个轻量的编辑器,这样能够随手打开编写,方便平时业余学习.网上搜罗了一堆编辑器, ...

  10. WEB 开发工具分享

    有好用的工具 : 云盘链接地址: