HTML 中块级元素设置 height:100% 的实现

HTML 中块级元素设置 height:100% 的实现

当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。

为什么height:100%不起作用呢?

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

而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个div的高度设定为height: 50%;,而它的父元素的高度是100px,那么,这个div的高度应该是50px。
当设计一个页面时,你在里面放置了一个div元素,你希望它占满整个窗口高度,最自然的做法,你会给这个div添加height: 100%;的css属性。然而,如果你要是设置宽度为width: 100%;,那这个元素的宽度会立刻扩展到窗口的整个横向宽度。高度也会这样吗?

错。

为了理解为什么不会,你需要理解浏览器是如何计算高度和宽度的。Web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。
但是高度的计算方式完全不一样。事实上,浏览器根本就不计算内容的高度,除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的让内容往下堆砌,页面的高度根本就无需考虑。因为页面并没有缺省的高度值,所以,当你让一个元素的高度设定为百分比高度时,无法根据获取父元素的高度,也就无法计算自己的高度。换句话说,父元素的高度只是一个缺省值:height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。
父元素没有设定固定高度,于是子元素的高度height: 100% 也不会起作用。
那么,如果想让一个元素的百分比高度height: 100%;起作用,你需要给这个元素的所有父元素的高度设定一个有效值。换句话说,你需要这样做:

<html>
  <body>
    <div style="height: 100%;">
      <p>
        想让这个div高度为 100% 。
      </p>
    </div>
  </body>
</html>
现在你给了这个div的高度为100%,它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用,你必须设定<body>和<html>的高度 !!!
现在你给了这个div的高度为100%,它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用,你必须设定<body>和<html>的高度 !!!
现在你给了这个div的高度为100%,它有两个父元素<body>和<html>。为了让你的div的百分比高度能起作用,你必须设定<body>和<html>的高度 !!!
<html style="height: 100%;">
  <body style="height: 100%;">
    <div style="height: 100%;">
      <p>
        这样这个div的高度就会100%了
      </p>
    </div>
  </body>
</html>

从这个 height: 100% 就起作用了。

在使用height: 100%;时需要注意的一些事项:
1、margin 和 padding 会让你的页面出现滚动条,也许这是你不希望的。
2、如果你的元素实际高度大于你设定的百分比高度,那元素的高度会自动扩展。

原文地址:https://www.cnblogs.com/wzp-monkey/p/10383520.html

时间: 2024-10-16 02:50:54

HTML 中块级元素设置 height:100% 的实现的相关文章

CSS中块级元素水平格式化

CSS中块级元素的(width+padding+marninig+border)因该等于其包含块的width.其中margin可能为负值,其他均为正值. 如果width和margin-left和margin-right都设置为auto的话,浏览器代理会默认将margin-left和margin-right设为0,将width设为包含块的width. 如果width与margin-left.margin-right其中一个为auto,而另一个margin设为固定值的话,浏览器代理会把为auto的那

HTML中块级元素和行内元素的总结和区分。

摘自: https://www.cnblogs.com/yanqiu/p/8987126.html HTML标签 html标签定义: 是由一对尖括号包裹的单词构成,例如: <html>. 标签不区分大小写<html> 和 <HTML>, 推荐使用小写. 标签分为两部分: 开始标签<html> 和 结束标签</html>, 两个标签之间的部分我们叫做标签体. 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭和标签,例如: <br/&g

html中块级元素和行内元素

块级元素和行内元素的三个区别 1.行内元素与块级元素直观上的区别: 行内元素会在一条直线上排列,都是同一行,水平方向排列 块级元素独占一行,垂直方向排列.块级元素从新行开始结束接着一个断行 2.块级元素可以包含行内元素和块级元素, 行内元素不能包含块级元素 3.行内元素和块级元素属性的不同,主要是盒模型属性上 行内元素设置width无效,height无效(可以设置line-height), 行内元素margin上下无效,padding上下无效 行内元素转换块级元素,用css实现 display:

HTML元素中块级元素、行内元素以及行内块元素整理

块级元素 h1-h6>>1-6级标题 p>>段落 div>>定义文档中的节 ul>>定义无序列表 ol>>定义有序列表 li>>定义无序列表与有序列表中的项 hr>>水平线 address>>定义文档作者或拥有者的联系信息 blockquote>>定义长的引用 pre>>定义预格式文本 form>>定义表单 fieldset>>定义围绕表单中元素的边框 legen

块级元素设置position为absolute后的变化

当块级元素(如div)设置position为absolute后,原有默认100%的宽度消失,其中内容多宽就显示多宽 图一.不设置宽度的情况 图二.设置宽度为100%的效果

深度理解CSS中块级元素与行内元素的区别(个人易错点)

区别一: 块级:块级元素会独占一行,默认情况下宽度自动填满其父元素宽度 行内:行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 区别二: 块级:块级元素可以设置宽高 行内:行内元素不可以设置宽高 区别三: 块级:display:block; 行内:display:inline; 可以通过修改display属性来切换块级元素和行内元素. 区别四: 块级:块级元素可以设置margin,padding 行内:行内元素水平方向的margin-left; margin-righ

CSS中块级元素和行内元素

文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 但是在IE中浮动元素也存在于文档流中(还让我觉得这样很合理><). 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流

IE6、7下块级元素设置display:inline-block不换行的解决办法

使用背景 在实际的工作中,我们有的时候会把块元素设置为inline-block,这样做的目的有2个,一是块元素能够排列到一行,二是块元素就形成包裹性,能够自适应content area,而不必设置宽和高(依实际情况而定),在现在浏览器中没有什么问题,但是IE6.7下,当把block元素设置成inline-block之后,还是在分别的两行,下面我们看一下现象. 代码以及IE6.7下的表现 CSS: body { padding: 10px; } .block_to_inlineblock, .in

CSS中的行内元素和块级元素

我们在构造页面时,会发现有的元素是上下排列的,而有的则是横向排列的,这是为啥子呢   看看上图,我们也没给他设置啥子属性咋就不一样了,其实是因为每个元素都有默认的 display 属性,比如 div 标签的默认 display 属性是 block,我们通常称这类元素为块级元素:span 标签的默认 display 属性是 inline,我们通常称这类元素为行内元素 我们可以看到块级元素总是独占一行,从上到下显示,行内元素则是从左到右显示.这是因为块级元素前后有换行符,而行内元素前后没有换行符.除