背景渐变-填充页面而无需滚动条或重复 [英] Background Gradient - Fill Page without scroll bars or repeating

问题描述

我有一个背景渐变，看起来不错，但是我有一个问题，在短页面上，背景太长，导致不必要的滚动条；在长页面上，背景将开始重复，而不是拉伸以填满整个页面.

I have a background gradient and it looks great but I have one problem, on short pages the background is too long and causes unnecessary scroll bars and on long pages the background will start to repeat instead of stretching to fill the entire page.

这是我正在使用的CSS:

Here is the CSS I am using:

html, body{
font-size:1em;
font-family: "ff-dagny-web-pro", Helvetica, Arial, sans-serif;
line-height:1.438em;
color:#222;
margin: 0;
padding: 0;
text-align: justify;
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,0,0,1) 25%, rgba(209,209,209,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(25%,rgba(0,0,0,1)), color-stop(100%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 25%,rgba(209,209,209,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#d1d1d1',GradientType=0 ); /* IE6-9 */

}

当我添加height: 100%;时，它会导致短页上的滚动条.我试图通过使用overflow: hidden;删除它们，但是这导致长页面上的所有内容都无法显示！另外，如果我不使用height: 100%;，则渐变仅填充大约一半的页面并重复.

When I add height: 100%; it causes scroll bars on short pages. I attempted to remove them by using overflow: hidden; but that caused any content on long pages to not show! Also if I do not use height: 100%; then the gradient only fills about half the page and repeats.

对于执行或尝试解决此问题，我有些困惑.

I am a bit perplexed as to what to do or try to solve this issue.

注意:虽然我更喜欢CSS解决方案，但是如果有一个javascript解决方案(使用jQuery)可以工作，那么我将尝试尝试使其工作.

Note: While I would prefer a CSS solution, if there is a javascript solution (using jQuery) that works I would be willing to attempt that to get this to work.

推荐答案

导致此问题的原因是我尝试实现粘滞页脚".我删除了所有高度要求(即:min-height和height)，并且浏览器进行了相应的调整，没有问题.

What caused this issue was my attempt to implement a "Sticky Footer". I removed all height requirements (IE: min-height and height) and the browser adjust accordingly without issue.

作为旁注，我使用以下代码解决了我的页脚问题:

As a side-note, I used the following code to solve my sticky footer issue:

$(function() {
    var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight() );
    $("#page-content").css("min-height",height+"px");
});

这篇关于背景渐变-填充页面而无需滚动条或重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！