html和body元素的高度和宽度
如果我有以下标记
<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>
具有以下样式
html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}
为什么我的html,body和wrapper元素不能扩展到FF13中浏览器/视图端口的100%高度.在查看Firebug时,html,body和wrapper从底部垂直停止一段距离.容器div延伸到整个高度,因为它的高度由内容决定.
(1263px X 558px用于html,正文,包装)和(960px X 880px用于容器)
看下面的默认值100%,如下图所示.但是当我放大到最后一次放大时,上面没有发生,因为下面的第二张图片显示并且html,body,wrapper延伸到全高.
(4267px X 1860px for html,body,wrapper) - (960px X 1000px for container)
use*_*860 24
你html居然正好延伸到你的事业视视的100%高度这里是浏览器窗口,而不是内部的内容.
考虑一下(jsfiddle):
<div id="div1">
<div id="div2">
<div id="div3">
very much content
</div>
</div>
</div>
#div1 {
height:300px;
overflow-y:scroll;
border: 1px solid black;
}
#div2 {
height:100%;
}
#div3 {
height:600px;
}
div1这里有300px的高度并滚动.当您滚动内容时,您只需移动内部div,但高度保持不变300px.当你设置height:100%为html 时,恰好相同.您的浏览器高度保持不变.
缩小视口时,您没有滚动,因此内部内容的高度小于视口的高度.
不久,html {height:100%}涉及父母的身高而不是内心的高度
更新:
您可以为block-element的高度指定3种类型的值:
长度 - 设定固定高度(ig'200px','50em').就是这样,我再也不说了.
百分比 - 来自W3C规范:
百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".根元素的百分比高度相对于初始包含块.
- auto - 高度取决于其他属性的值.(通常在内部内容的高度:文本,其他内联元素,块元素等)
浏览器显示您的页面时发生了什么:
- 它得到
height: 100%了<html>.这意味着生成的高度是相对于html包含块的生成框(在这种情况下为元素)的高度计算的(initial containing block即browser window在那种情况下).让我们说吧1024px. - 那么就需要
height: 100%进行<body>.它会将body高度设置为已计算的高度html,即1024px. - 然后浏览器应用
height:auto到#wrapper,然后#container和<p>.我不知道它究竟是怎么做的,但可以假设它推迟了高度设置(以及相应的所有其他依赖于背景,边框等的样式)并继续进行内部内容. - 下一点是文字内容.浏览器采用指定的相关属性或它自己的属性,即
default stylesfont-family,font-size和文本的高度. - 之后,它会将高度设置为
<p>-element,因此<p>将向下拉伸以包含所有内容(在这种情况下为文本).同样的,然后发生了#container和#wrapper.
如果它发生的高度#wrapper大于身体的高度(1024 px如同意),overflow应该应用于body.这是visible默认值.然后overflow: visible应用于html.然后浏览器显示滚动整个window.老实说,我不知道这是否由W3C规范指定,但可以假设它是.
因此,当您滚动窗口时,您html和body所有其他元素一样被移动.这与任何其他元素的行为相同(例如我在上面发布的jsfiddle):
请注意,背景是在body元素上设置的,但它会扩展到整个画布,即远远超出body元素本身.这是你担心可能需要在身体上设置bg属性.这完全符合W3C规范(切割):
对于其根元素为..."html"元素的文档,其中"background-color"的计算值为"transparent",而"background-image"的计算值为"none",用户代理必须使用计算的背景值在为画布绘制背景时,该元素的第一个..."body"元素子属性,并且不得为该子元素绘制背景.如果仅为根元素绘制它们,那么这些背景也必须固定在同一点上.
缩小页面时,浏览器会重新计算所有尺寸.比方说,每个Ctrl+ -点击页面缩小,例如,缩小20%.然后,所有的文字被降低,导致其高度取决于字体大小,这是受影响Ctrl+ -单击,相应地<p>,#container和#wrapper所有减少的原因他们的高度取决于text的高度.但body与html二者具有高度依赖于window未受到的身高Ctrl+ -单击.这就是为什么你最终得到这个:
在这种情况下,宽度和高度行为之间没有区别.您没有看到水平尺寸的相同问题,因为您已经设置width: 960px;了#container结果小于浏览器窗口的宽度,因此不会发生溢出.如果宽度#container超过了身体宽度,你会看到:
这一切都是正常和预期的行为,这里没有什么可解决的.
| 归档时间： |
|
| 查看次数： |
84817 次 |
| 最近记录： |