使<body>填满整个屏幕？

我在我的网页上使用径向渐变作为背景，如下所示： 

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

它可以工作，但是当内容没有填满整个页面时，渐变被切断。 我怎样才能使<body>元素填充整个页面，总是？ 

 html, body { margin: 0; height: 100%; }

在我们的网站上，我们有内容是静态的页面，以及使用AJAX加载的页面。 在一个页面（一个search页面）上，有些情况下，AJAX的结果会超过页面的填充，以及不会返回结果的情况。 为了在所有情况下填充页面的背景图片，我们必须应用下面的CSS： 

 html { margin: 0px; height: 100%; width: 100%; } body { margin: 0px; min-height: 100%; width: 100%; }

html min-height和body min-height 。

由于没有其他的答案为我工作，我决定张贴这个答案为其他人寻找一个解决scheme谁也发现了同样的问题。 html和body都需要用min-height设置，否则渐变将不能填充身高。

我发现斯蒂芬P的 评论提供了正确的答案。 

 html { /* To make use of full height of page*/ min-height: 100%; margin: 0; } body { min-height: 100%; margin: 0; }

填充身体高度的背景

当我有HTML（或HTML和身体）高度设置为100％时， 

 html { height: 100%; margin: 0; } body { min-height: 100%; margin: 0; }

背景不填充身体

我不得不100％适用于HTML和正文。

尝试在身体级使用视口（vh，vm）度量单位

html，body {margin：0; 填充：0; } body {min-height：100vh; }

使用vh单位水平页边距，填充和边框在身体上，并从最小高度值中减去它们。

使用vh，vm单位对身体内的元素进行奇怪的结果，尤其是在重新resize时。

Interesting Posts