HTML CSS高度100％仅与屏幕分辨率一样高,而不是身高_html-js-css

概述我无法弄清楚如何使我的季节性叠加div成为html的全部高度.现在它是屏幕的高度,但向下滚动会切断部分图像.有没有人知道正确的方法来使sesasonal overlay div扩展html的整个高度？ div是服务器端包含的一部分,所以我不能在我的内容后关闭底层div.此外,我关闭的一半在线销售不使用 javascript,所以它需要是一个html / css解决方案. 只需看到我的JSFIDDL 我无法弄清楚如何使我的季节性叠加div成为HTML的全部高度.现在它是屏幕的高度,但向下滚动会切断部分图像.有没有人知道正确的方法来使sesasonal overlay div扩展HTML的整个高度？ div是服务器端包含的一部分,所以我不能在我的内容后关闭底层div.此外,我关闭的一半在线销售不使用 javascript,所以它需要是一个HTML / CSS解决方案.

只需看到我的JSFIDDLE就可以节省阅读下面的时间.

谢谢.

CSS：

HTML{    filter: progID:DXImagetransform.Microsoft.gradIEnt( startcolorstr='#C5CEFF',endcolorstr='#F8D0FD',GradIEntType=0 );    background: -webkit-gradIEnt(linear,left top,left bottom,from(#C5CEFF),to(#F8D0FD)) fixed;    background: -moz-linear-gradIEnt(top,#C5CEFF,#F8D0FD);    margin:0px;    padding:0px;    min-height:100%;}body{    margin:0px;    padding:0px;    overflow-x: hIDden;    min-height:100%;    display:block;}.background-overlay-season{    position:absolute;    left:0px;    top:0px;    z-index:-1;    wIDth:100%;    background-image:url(http://sonosmile.com/images/fall.png);    margin:0px;    padding:0px;    overflow-x: hIDden;    min-height:100%;    display:block;}

HTML：

<HTML><body><div ></div>a bunch of content....</body></HTML>

解决方法是的,我想我已经找到了.

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

如果我们从HTML CSS中删除过滤器并且出现了body background-image,但显然这不太有用,因为我们在IE中丢失了渐变.好.所以,试图找出原因,我测试了从colorzilla创建一个新的渐变.当我把它放进去时,它起作用了：

background: #c5ceff; /* old browsers */background: -moz-linear-gradIEnt(top,#c5ceff 0%,#f8d0fd 100%); /* FF3.6+ */background: -webkit-gradIEnt(linear,color-stop(0%,#c5ceff),color-stop(100%,#f8d0fd)); /* Chrome,Safari4+ */background: -webkit-linear-gradIEnt(top,#f8d0fd 100%); /* Chrome10+,Safari5.1+ */background: -o-linear-gradIEnt(top,#f8d0fd 100%); /* Opera 11.10+ */background: -ms-linear-gradIEnt(top,#f8d0fd 100%); /* IE10+ */background: linear-gradIEnt(to bottom,#f8d0fd 100%); /* W3C */filter: progID:DXImagetransform.Microsoft.gradIEnt( startcolorstr='#c5ceff',endcolorstr='#f8d0fd',GradIEntType=0 ); /* ie6-9 */

大.但为什么？经过一些调试后,事实证明除非你指定第一个背景(背景：#c5ceff; / *旧浏览器* /),否则它将无法工作,身体上的背景就不会显示.它不仅仅是背景图像,也不适用于纯色.不知道为什么.

但是你去吧.这是你的新CSS,你的叶子背景图像在身体上,并在IE中工作.

HTML {  background: #c5ceff; /* old browsers */  background: -webkit-gradIEnt(linear,to(#F8D0FD)) fixed;  background: -moz-linear-gradIEnt(top,#F8D0FD);  filter: progID:DXImagetransform.Microsoft.gradIEnt( startcolorstr='#C5CEFF',GradIEntType=0 );  margin:0px;  padding:0px;}body{  margin:0px;  padding:0px;  background:url(http://sonosmile.com/images/fall.png);}

http://jsbin.com/eBOcuLE/4/edit

请注意,我为空div删除了所有样式.使用该div作为背景将不起作用,因为虽然您可以使其高度为100％,但它只是视口的高度.它没有内容,所以它不知道页面内容比视口更长.

总结

以上是内存溢出为你收集整理的HTML CSS高度100％仅与屏幕分辨率一样高,而不是身高全部内容，希望文章能够帮你解决HTML CSS高度100％仅与屏幕分辨率一样高,而不是身高所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1064980.html

HTML CSS高度100％仅与屏幕分辨率一样高,而不是身高

发表评论

评论列表（0条）