高度和宽度上html和body元素

如果我有下面的标记高度和宽度上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，身体和包装元素延伸到100％的高度FF13中的浏览器/视图端口。在Firebug中查看时，html，body和wrapper在离底部一定距离处垂直停止。容器div扩展到完整高度，因为它的高度取决于内容。

（1263px X 558px为HTML，身体，包装物）和（960像素X为880px容器）

综观默认100％以上发生如下所示的第一图像。但是，当我放大到最后的放大缩小时，上述情况不会发生，因为下面的第二个图像显示，并且html，body，wrapper扩展到了整个高度。

（4267px X 1860px为HTML，身体，包装器） - （960像素X 1000像素为容器）

enter image description here

来源

2012-08-16 Jawad

'包装'和'容器'无效HTML元素：/ – 2012-08-16 21:06:54

@BillyMoat：它是一个div而不是包装元素。

– Jawad 2012-08-16 21:09:21

@BillyMoat：因为是拼写错误而更改。 – Jawad 2012-08-16 21:11:07

你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这里拥有300像素的高度和滚动。当您滚动内容时，只需移动内部div，但高度保持不变即300px。如果将height:100%设置为html，则会发生同样的情况。您的浏览器高度保持不变。

当您缩小视口时，您并未滚动，因此内容的高度小于视口的高度。

不久，html {height:100%}涉及父母的高度不内部内容的高度

UPDATE：

可以指定3种类型的值，以所述块元件的高度的：

长度 - 设定固定高度（例如， '200px'，'50em'）。就是这些，我可以再多说一点。
百分比 - 从W3C spec：

的百分比相对于所生成的框的包含块的高度来计算。如果未明确指定包含块的高度（即，它取决于内容高度），并且该元素没有被绝对定位，则该值计算为'auto'。根元素上的百分比高度与初始包含块相关。

自动 - 高度依赖于其他属性的值。（一般对内部内容高度：文本，其他内联元素，块元素等）

时，浏览器显示您的网页发生了什么：

它得到height: 100%为<html>。这意味着所产生的高度是相对于包含块（initial containing block，即在该情况下为browser window）的所生成的盒子（在该情况下为html-元素）的高度来计算的。假设1024px。
那么<body>需要height: 100%。它会将body的高度设置为html的已计算高度，即1024px。
然后浏览器将height:auto应用到#wrapper然后#container和<p>。我不知道它是如何做到这一点，但可以推测它推迟了高度设置（以及分别取决于背景，边界等的所有其他样式）并且继续到内部内容。
下一点是文字内容。浏览器采用指定的相关属性或它自己的属性，即default styles，如font-family，font-size和文本的高度。
之后它将高度设置为<p> -element，因此<p>将向下展开以包含所有内容（在这种情况下为文本）。 #container和#wrapper也是如此。

如果它发生了#wrapper的高度比人体的一个（1024 px，因为它进行了约定），比overflow应适用于body更大。那是默认的visible。然后overflow: visible适用于html。然后浏览器显示滚动整个window。老实说，我不知道这是W3C规范所规定的，但可以假设它是。

所以当你滚动窗口时，你的html和body和所有其他元素一样被移动。这是相同的行为是与任何其它元素（如在的jsfiddle我张贴以上）：

scrolled part of the body

注意，背景被设定在body元件上，但它延伸到整个canvas即远远超出了body元素本身。这是关于可能需要在身体上设置bg属性的问题。这是符合其中规定的W3C spec（板缺）100％：

对于文档根元素是已计算的“透明”的值“背景色”和“一个......“HTML”元素none'为'background-image'时，用户代理必须改为使用该元素的第一个...“body”元素子元素的背景属性的计算值，当绘制背景为画布，并且不得绘制背景子元素。这些背景也必须与它们仅用于根元素时相同的点上。

当您缩小页面时，浏览器会重新计算所有尺寸。比方说，每个Ctrl + -单击页面缩小，例如，20％。然后，所有的文字被降低，导致其高度取决于字体大小，这是由Ctrl + -点击的影响，相应地<p>，#container和#wrapper所有减少的原因他们的高度取决于text的高度。但body和html的高度取决于window的高度，不受Ctrl + -点击的影响。这就是为什么你最终得到这个： zoomed out page

在这种情况下宽度和高度行为没有区别。您看不到横向尺寸的问题，因为您已经为#container设置了width: 960px;，结果小于浏览器窗口的宽度，因此不会发生溢出。如果#container的宽度都超过身体的宽度，你会看到： same issue but with the width

这一切是正常的和预期的行为，并没有什么在这里解决。

来源

2012-08-16 22:07:08 user907860

那么如何解决这个问题。如果我给背景颜色的div＃包装（在你的情况的div＃3），背景颜色（如红色）只扩展到HTML和身体（在你的情况下，div＃1和div＃2）相同的高度和这会导致背景颜色不能扩展到全高，缩小时只有一部分是红色的，而底部的某些部分是白色/透明的（html和body的颜色）。 – Jawad 2012-08-16 22:13:00

@Jawad，你可以附加背景到你的内容的一些包装，所以它会相应地扩展。你也可能想要使用所谓的'sticky footer'，所以如果没有足够的内容（如你的第二张图片），页脚将在窗口的底部。看到这个http://stackoverflow.com/questions/11606856/background-repeat-with-html-body-height-to-100-with-css-sticky-footer/11606934#11606934 – user907860 2012-08-16 22:18:15

我知道所有关于粘脚。检查我的配置文件。我不是这样问的。我也不希望html {height：100％}拥有内容的高度。它与内容无关（在我的情况下，div＃容器）。我希望html，body和div＃wrapper的高度为100％，因为它的宽度为100％。如果它涉及父级的高度，那么div＃wrapper的父级是body，body的父级是html，父级是浏览器窗口/视口。给定包装（背景颜色为红色）和100％高度设置HTML，身体＆div＃包装会导致此问题。 – Jawad 2012-08-16 22:30:29

因为不可能将高度设置为100％，如果该元件可相对于浏览器窗口。其原因是由于滚动，您的浏览器窗口可能会无限大。你将不得不设置一个固定的高度，否则你只需要将高度设置为扩展到其中的任何内容。

但是width: 100%;是完全有效的。

您还需要使用有效的html标签。我会做的是，而不是使用<包装>和<容器>，我会在你的CSS做一个类。类名是通过以句号开头来声明的。

.container{ 
width: 100%; 
} 

<div class="container"></div>

好运，

-Brian

来源

2012-08-16 21:07:39 OneChillDude

那么为什么放大时它工作？ – Jawad 2012-08-16 21:18:20

原因你缩小时没有滚动，只是 – user907860 2012-08-16 21:52:34

@caligula：是的，它很简单。使用@发表评论。 – Jawad 2012-08-16 21:59:01

高度和宽度上html和body元素

回答

相关问题