html - 如何让背景颜色缩放到窗口大小？

Question

我的 CSS 页面的正文中有渐变背景颜色。我已经尝试了许多带有填充和边距的配置，但没有成功让颜色适应不同尺寸的屏幕。顶部，左侧或右侧都不是问题，只有底部。为了快速修复，我将主体的底部填充设置为 10%。我宁愿让背景颜色缩放以适应窗口大小。提前致谢！这是页面的链接，它实际上只发生在 IE 或一个完整的窗口中。 http://jstrobel.sheridan-college.com/index.html

body {  
background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc));
background: -webkit-linear-gradient(#003399, #6699cc);
background: -moz-linear-gradient(#003399, #6699cc);
background: -ms-linear-gradient(#003399, #6699cc);
background: -o-linear-gradient(#003399, #6699cc);
background: linear-gradient(#003399, #6699cc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399',  
    endColorstr='#6699cc');
zoom: 1;
    margin: 0;
    padding-top: 2%;
    padding-bottom: 3%;
 }
 #wrapper { margin: auto;
       width: 1060px; 
    min-width: 1060px;
   -webkit-box-shadow: 5px 5px 5px #1e1e1e;
   -moz-box-shadow: 5px 5px 5px #1e1e1e;
   -ms-box-shadow: 5px 5px 5px #1e1e1e;
   -o-box-shadow: 5px 5px 5px #1e1e1e;
   box-shadow: 5px 5px 5px #1e1e1e;
 }
 #container { background: #ffeeee;
     background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc));
     background: -webkit-linear-gradient(#ffeeee, #6699cc);
     background: -moz-linear-gradient(top, #ffeeee, #6699cc);
     background: -ms-linear-gradient(#ffeeee, #6699cc);
     background: -o-linear-gradient(#ffeeee, #6699cc);
     background: linear-gradient(#ffeeee, #6699cc);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee',   
         endColorstr='#6699cc');
     zoom: 1; 
     min-width: 1060px;
         font-family: Verdana, Arial, sans-serif

Answer 1

添加： background-attachment: fixed; 到你的身体。

解决方案是：

html {
    background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc));
    background: -webkit-linear-gradient(#003399, #6699cc);
    background: -moz-linear-gradient(#003399, #6699cc);
    background: -ms-linear-gradient(#003399, #6699cc);
    background: -o-linear-gradient(#003399, #6699cc);
    background: linear-gradient(#003399, #6699cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399',  
        endColorstr='#6699cc');
}

---

body {  
    background: -webkit-gradient(linear, top, bottom, from(#003399), to(#6699cc));
    background: -webkit-linear-gradient(#003399, #6699cc);
    background: -moz-linear-gradient(#003399, #6699cc);
    background: -ms-linear-gradient(#003399, #6699cc);
    background: -o-linear-gradient(#003399, #6699cc);
    background: linear-gradient(#003399, #6699cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#003399',  
        endColorstr='#6699cc');
    zoom: 1;
    margin: 0;
    padding-top: 2%;
    padding-bottom: 3%;
    background-attachment: fixed;
 }
 #wrapper { 
    margin: auto;
    width: 1060px; 
    min-width: 1060px;
    -webkit-box-shadow: 5px 5px 5px #1e1e1e;
    -moz-box-shadow: 5px 5px 5px #1e1e1e;
    -ms-box-shadow: 5px 5px 5px #1e1e1e;
    -o-box-shadow: 5px 5px 5px #1e1e1e;
    box-shadow: 5px 5px 5px #1e1e1e;
 }
 #container { 
    background: #ffeeee;
    background: -webkit-gradient(linear, top, bottom, from(#ffeeee), to(#6699cc));
    background: -webkit-linear-gradient(#ffeeee, #6699cc);
    background: -moz-linear-gradient(top, #ffeeee, #6699cc);
    background: -ms-linear-gradient(#ffeeee, #6699cc);
    background: -o-linear-gradient(#ffeeee, #6699cc);
    background: linear-gradient(#ffeeee, #6699cc);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeeee',   
         endColorstr='#6699cc');
    zoom: 1; 
    min-width: 1060px;
    font-family: Verdana, Arial, sans-serif;
  }

编辑： 并添加：

html, body {
     height: 100%;
}

演示：