如何获得对CSS3梯度跨越整个页面的高度，而不是仅仅视？ [英] How to get CSS3 gradient to span the height of the entire page, not just the viewport?
本文介绍了如何获得对CSS3梯度跨越整个页面的高度，而不是仅仅视？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个跨浏览器的CSS渐变，像这样的：
I have a cross-browser CSS gradient, such as this:
#background {
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */
}
但我需要它来跨越整个页面的高度，而不仅仅是视口。换句话说，我需要的样式应用到具有相同的高度，整个页面，这通常会是一个元素体或 HTML 。
进一步的并发症：
我还使用了粘页脚，这就要求 HTML 和体设置为100％的高度。所以应用样式给他们造成只有视填充。
Further complications:
I'm also using the sticky footer, which requires html and body to be set to 100% height. So applying the style to them results in only the viewport being filled.
我甚至不知道什么，我问的是可能的，但任何帮助，将AP preciated。
I'm not even sure if what I'm asking is possible, but any help would be appreciated.
推荐答案
根据凯尔的解决方案，以及从粘在其他风格页脚，这里要说的是终于摸索解决方法：
Based on Kyle's solution, as well as the other styles from the sticky footer, here is the solution that finally worked:
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -250px;
background: #1E5799; /* old browsers */
background: -moz-linear-gradient(top, #002c5a 0%, #79d6f4 100%); /* firefox */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#002c5a), color-stop(100%,#79d6f4)); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c5a', endColorstr='#79d6f4',GradientType=0 ); /* ie */ } /* corresponds to height of #footer */
#body-wrapper {
height: 100%;
width: 100%;
}
通过下面的HTML：
<body>
<div id="body-wrapper">
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</div>
</body>
这篇关于如何获得对CSS3梯度跨越整个页面的高度，而不是仅仅视？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
