首先我们来看一个实际的问题,让body中的一个div占全屏,(问题来源:http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window

下面的代码符合要求吗?

<style>
#div1{
background:#ccc;
border:1px solid red;
width:100%;
height:100%;
}
</style>
</head> <body>
<div id="div1">
div1
</div>

运行后div1还是只占一行,height没有到达全屏。

当然,我们以前用过一种方法,就是使用position:absolute,设置top:0,bottom;0这样元素的尺寸就会根据偏移来推断了。

不改变position,怎么达到要求呢?

增加一句;

html,body{
height:100%;
width:100%;
}

就可以了。

为什么?

首先我们要清楚htmlVSbody区别。

一篇好文;

html VS body

Summary

  • The html and body elements are distinct block-level entities, in a parent/child relationship.
  • The html element's height and width are controlled by the browser window.  html尺寸由浏览器窗口控制。
  • It is the html element which has (by default) overflow:auto, causing scrollbars to appear when needed.
  • The body element is (by default) position:static, which means that positioned children of it are positioned relative to the html element's coordinate system.
  • In almost all modern browsers, the built-in offset from the edge of the page is applied through a margin on the body element, not padding on the htmlelement.几乎所有的浏览器,默认的偏移margin是在body元素上,而不是html的padding.(通过做实验确实如此)有些还是body的padding,所有重置页边距用body{margin:0;padding:0}缺一不可

Introduction

Many web developers do not understand the difference between applying style to the body element versus the html element. Most of the time these authors will apply style only to the body element; when that's not sufficient, they'll spam all sorts of styles on both html and body until the page happens to look correct.

The confusion is understandable. In the beginning, both were treated similarly, with (now-deprecated) attributes like bgcolor being applied to the body tag, affecting the whole page.

This article attempts to enlighten you, Web Developer, to fully grok how these two elements are used in modern web browsers.

Mommy, Where Do Scrollbars Come From?

On any non-trivial HTML page, there's enough content that the page gets a scrollbar on the side. Where does this scrollbar come from? Magic? An unholy tryst between UI widgets? Maybe. Or maybe it's the simple result of an implicit CSS rule like:

html { overflow:auto }

"But the html element doesn't have a height!" you cry, confused. "How can it generate scrollbars, if it's a block-level element without a specific height?"

The html element is a little bit special. Its height and width are governed by the window/frame it's in. When you increase your window width, the fixed width of the html element is increased; when you make the window taller, so increases the height of the html element.

Because pictures often help, let's see what it would look like if the html element could have overflow:visible:

滚动条从哪里来?原因是

html { overflow:auto;} 是默认的。

如果不设置html height怎么会有滚动条,原来html有点特殊,它的widht和height是有浏览器窗口大小决定的。

Hopefully this picture helps, rather than confuses. See how the html element (in red) goes to the edges of the window, but the body overflows that container? The html element is responsible for showing the scrollbar for the 'page' when the content gets too tall.

So What?

What does this mean for you? A couple things:

  • If you're one of those designers who likes fixed-width, centered pages, you can do this by setting a width on the body tag and centering it. (Example)
  • Because body isn't positioned (or more accurately, it's position:static by default), setting a child element to height:100% causes it to be 100% of the height of the html element, not the body element. Thus, if you want something to be as tall as the body is (going down past the bottom of the page) use
    body { position:relative } 意思是说如果你想一个child元素 height为100%,
  • (However, see also Tall Nav and Tall Content.)

  • Hopefully it helps you understand exactly where margin and padding and border will be appear when applied to the html and body elements.

转自:http://phrogz.net/css/htmlvsbody.html 演示参考这个网页

清楚了html和body后,我们来看

html,body{
height:100%;
width:100%;
}
div{
width:100%;
height:100%;
}

为什么这个可以将div的尺寸变成屏幕一样大。、

看下面的例子,我们没有设置body的width和height。

html{
height:100%;
width:100%; } #div1{
background:#ccc; width:100%;
height:100%; }
</style>
<script>
window.onload=function(){alert(document.body.clientHeight); };
</script>
</head> <body>
<div id="div1">
div1
</div>

显示是,div1背景还是只有一行。说明height:100%

javascript函数输出:18。这说明,我们没有定义body的height,但由于里面有内容,把里面的内容包起来的最小高度为18px,

由于body是块元素,width没设置时更父元素的width一样,也就是html的width。

《css权威指南指出》height width百分数是相对于包含块的。在本例中,div1的height相对于body,但由于body没有设置

height,《css权威指南》又指出(P180),如果没有显示声明包含块的height,百分数高度会重置为auto,所以上面div1height设置为任何值都跟设置没设置一样。包含块与div1高度完全相同。

所有出现了上面的情况。

(牢记:就是要设置div100%显示,必须设置其上一级div的宽度或高度,否则无效。)

所有html,body,div都要设置height为100%。虽然html默认的width和height一样,但是由于body设置的是100%,如果没有

显式设置html,body还是相当于没设置。

html body width height 100%使用的更多相关文章

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

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

  2. height:100% 布局

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

  3. 设置height:100%无效的解决方法

    设置height:100%无效的解决方法 刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:" ...

  4. height:100%与height:inherit的区别

    一.兼容性 首先,inherit这个属性只是在ie8+才支持:100%支持ie6: 二.大多数情况下没有区别 在正常情况下height:100%与height:inherit没有任何区别: 1.父元素 ...

  5. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  6. height:100%不起作用(无效),div全屏

    当父容器是body时,height:100%不起作用(无效),解决办法:在css代码段中添加 html, body{ margin:0; height:100%; } 实现div全屏的时候需要上面那段 ...

  7. 如何让 height:100%; 起作用

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

  8. table和div设置height:100%无效的完美解决方法

    刚接触网页排版的新手,常出现这种情况:设置table和div的高height="100%"无效,使用CSS来设置height:"100%"也无效,为什么会这样呢 ...

  9. table布局 height=100%无效分析

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-08-11) 原文链接:http://www.cnblogs.com/gaojun/archive/2012/05/07/2487 ...

随机推荐

  1. [学习笔记] AD笔记

    Auto diff 深度学习基础知识,auto diff自动微分的笔记,tensorflow中的求导就是基于这个做的.多用于复杂神经网络求导.来自于一篇论文,没怎么看完,但是会算了,比较底层一点吧.. ...

  2. 厌食?暴食?试试这个 VR 新疗法

    今日导读 “我知道我要吃饭,但我真的什么都吃不下.” “我脑子里想的只有吃东西,吃吃吃!” ....... 作为一个正常人,我们完全无法想象患厌食症或贪食症人群所受的痛苦.长期的厌食,会使一个人瘦的只 ...

  3. javaweb基础(18)_jsp属性范围

    所谓的属性范围就是一个属性设置之后,可以经过多少个其他页面后仍然可以访问的保存范围. 一.JSP属性范围 JSP中提供了四种属性范围,四种属性范围分别指以下四种: 当前页:一个属性只能在一个页面中取得 ...

  4. vue 报错unknown custom element解决方法

    原因: 没有引入相关组件导致的 解决办法: 如果组件是按需引入的必须引入你当前用到的组件,否则会报错

  5. iOS--UIScrollView基本用法和代理方法

    主要是为了记录下UIScrollView的代理方法吧 在帮信息学院的学长做东西的时候需要大量用到分块浏览,所以就涉及到很多的关于scrollview,所以也就有了这篇文章   - (void)view ...

  6. 更改BootStrap popover的默认样式

    .popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padd ...

  7. DNA Pairing-freecodecamp算法题目

    DNA Pairing 1.要求 DNA 链缺少配对的碱基.依据每一个碱基,为其找到配对的碱基,然后将结果作为第二个数组返回. Base pairs(碱基对)是一对 AT 和 CG,为给定的字母匹配缺 ...

  8. 救援(BFS)

    题目描述: 在你的帮助下,Oliver终于追到小X了,可有一天,坏人把小X抓走了.这正是Oliver英雄救美的时候.所以,Oliver又找到哆啦A梦,借了一个机器,机器显示出一幅方格地图,它告诉Oli ...

  9. 控制nginx并发链接数量和客户端请求nginx的速率

    一.控制nginx并发链接数 ngx_http_limit_conn_module这个模块用于限制每个定义的key值的链接数,特别是单IP的链接数. 不是所有的链接数都会被计数,一个符合计数要求的连接 ...

  10. 记一次低级错误导致的mysql(111)

    今天下午配好的双主多从服务器,两台主机+主机内安装好的6台虚拟机,两台Mysql master各授权好其slave的远程登录,原本好端端的能远程登录,晚上回来时候就发现其中一台master登录不上其s ...