HTML CSS高度100%仅与屏幕分辨率一样高，而不是身体高度

我不知道如何使我的季节性覆盖div成为html的全部高度。现在是屏幕的高度，但向下滚动会切断部分图像。有人知道让sesasonal overlay div扩展html整个高度的正确方法吗？div是服务器端包含的一部分，因此我无法在内容之后关闭参考底图div。另外，我一半的在线销售都不使用javascript，所以它需要一个html/css解决方案

你只要看看我的简历，就可以从下面的阅读中节省时间

谢谢

CSS:

HTML:

一堆内容。。。。

如果你想要全身都有背景图像，你可以使用这个

body
{
  background-image: url(http://sonosmile.com/images/fall.png);
  background-size: contain;
}

---

试试这个，我想我找到了

首先，我认为图像应该设置在身体上，但你说这在IE中不起作用，你是对的

如果我们从

html

CSS中删除

filter

，身体背景图像就会出现，但显然这没有太大帮助，因为我们在IE中丢失了渐变。Ok。所以，为了找出原因，我测试了从Colorzilla创建一个新的渐变。当我把它放进去时，它起了作用：

background: #c5ceff; /* Old browsers */
background: -moz-linear-gradient(top,  #c5ceff 0%, #f8d0fd 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c5ceff), color-stop(100%,#f8d0fd)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #c5ceff 0%,#f8d0fd 100%); /* IE10+ */
background: linear-gradient(to bottom,  #c5ceff 0%,#f8d0fd 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c5ceff', endColorstr='#f8d0fd',GradientType=0 ); /* IE6-9 */

太好了。但是为什么呢？经过一些调试，结果表明，除非指定第一个背景（

background:#c5ceff；/*旧浏览器*/

），否则它将无法工作，正文上的背景将无法显示。而且它不仅仅是背景图像，对于纯色也不起作用。不知道为什么

但你来了。这是你的新CSS，你的叶子背景图像在身体上，在IE中工作

html {
  background: #c5ceff; /* Old browsers */
  background: -webkit-gradient(linear, left top, left bottom, from(#C5CEFF), to(#F8D0FD)) fixed;
  background: -moz-linear-gradient(top, #C5CEFF, #F8D0FD);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C5CEFF', endColorstr='#F8D0FD',GradientType=0 );
  margin:0px;
  padding:0px;
}

body{
  margin:0px;
  padding:0px;
  background:url(http://sonosmile.com/images/fall.png);
}

---

---

请注意，我删除了空div的所有样式。使用该div作为背景将不起作用，因为尽管可以将其设置为100%高度，但它将仅为视口的高度。它里面没有内容，所以它不知道页面内容比视口的时间长。

嗯，我想我可能有一个答案给你

请记住，当使用

位置：绝对

时，元素最终是相对于它遇到的第一个祖先元素

位置：相对

。如果不存在，则容器将被视为

。那么为什么

，因此

.background overlay>

不放在文档的底部呢

<>你必须考虑在<代码> <代码>上指定的<代码>最小高度：100% < /代码>实际上是相对的；到底什么是100%的？该行为表明它实际上是相对于浏览器视口的高度的，因此

（以及使用它作为高度参考的任何元素）可以保证与视口一样高。因此，您实际上需要将

作为容器，而不是

，只需在CSS中添加一个简单的内容：

body{
    position:relative;
}

---

这是一个展示这一成果的例子。请注意，

.background overlay seasure

现在已扩展到文档的底部。如果这不是你想要的，请告诉我，我很乐意（尝试）进一步帮助你！（这对我来说也是一次学习经历，哈哈…

将div.background overlay season的内容移动到body

body {
    background-image: url("http://sonosmile.com/images/fall.png");
    display: block;
    left: 0;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

---

为什么你需要让HTML更高？你用了很多“it”，你能解释一下吗？你为什么不在

body

标签上设置背景呢？那么你就不需要那个空的

。像这样：对不起，我刚刚更新了问题，指定了我不能正确处理的季节覆盖div。@davipauljunior。我试过了，但它在internet explorer中不起作用。为什么不尝试将其设置为高于

100%

<代码>150%可能是：D@AuntJamaimainternet explorer大约有5种不同的浏览器。请具体点，对不起，马克。在问题的评论中，我们讨论了它在ie9中是如何不起作用的，所以我认为ie9和更早的版本不起作用。谢谢

body{
    position:relative;
}

body {
    background-image: url("http://sonosmile.com/images/fall.png");
    display: block;
    left: 0;
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
    padding: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}