html body 高度 100,高度为100％的html，body和div(html, body and divs with height 100%)

高度为100％的html，body和div(html, body and divs with height 100%)

我有很多内容延伸到屏幕下方。 在页面的顶部，我有一个包含“英雄形象”的div。 div填满了屏幕的高度。 我通过设置实现了这一点：

html, body { height: 100%; }

.hero_div { height: 100%; }

但我不明白为什么会这样。

如果我从身体移除100％的高度，高度是3978像素(整个页面/内容的高度)。 但是高度为100％时，身体的高度仅为653像素(屏幕的高度)，但仍会显示低于此653px的内容。

当然，身高100％的身体应该是身体标签内所有内容/页面的高度(在这种情况下为3978px)？

I have a lot of content that stretched below the bottom of the screen. At the top of the page I have a div containing a "hero image". The div fills the height of the screen. I have acheived this by setting:

html, body { height: 100%; }

.hero_div { height: 100%; }

But I don't understand why this works.

If I remove the height 100% from the body, the height is 3978 pixels (the height of the entire page/content). But with height 100% the height of the body is just 653 pixels (the height of the screen), but the content below this 653px is still displayed.

Surely body with height 100% should be the height of all the content/page within the body tag (in this case 3978px)?

原文：https://stackoverflow.com/questions/42629960

更新时间：2020-09-13 08:09

最满意答案

当然身高100％的身体应该是身体标签内所有内容/页面的高度

不可以。 height: 100%表示“元素内容高度的100％”不是“元素内容高度的100％”。

HTML元素的容器(有效地)是视口。

但仍会显示此653px以下的内容。

overflow的默认值不会被hidden 。

Surely body with height 100% should be the height of all the content/page within the body tag

No. The height: 100% means "100% of the height of the element's content" not "100% of the height of the element's content".

The container for the HTML element is (effectively) the viewport.

but the content below this 653px is still displayed.

The default value for overflow is not hidden.

相关问答

有两种选择， 1.将渐变固定，使其与页面滚动保持一致， 添加background-attachment:fixed; http://jsfiddle.net/v53mG/ 2.当页面滚动时，使用渐变滚动 需要在div中包含body的内容并将渐变设置为该div，也是100％高度并删除body的边距 CSS .bg-wrapper{

background:linear-gradient(#400040,#FFF);

height:100%;

}

HTML