背景渐变结束但不会继续

Question

我的身体元素下面有一个div。它有背景CSS：

-moz-linear-gradient(center top , #000000 0%, #30FF40 400px) repeat scroll 0 0 transparent

在我的div里面有一个数据表（一个jqGrid表）。我认为在我的页面加载后，网格表在我的页面上获得了一个空格。所以我的渐变背景在某个地方结束，我的页面底部有一个空格（其他页面没有数据表可以）。

我该如何解决？

修改

我的问题是这样的：

PS：

我找到了导致它的原因。我有一个包含我的数据表的div元素：

<div id="cont">
...
</div>

当我打开我的网页时，它变成了：

<div id="cont" style="height: 602px;">
...
</div>

我将#cont样式更改为height:auto等等，但即使我编写内联CSS定义，也会覆盖它。它有一个像：

的CSS

#cont {
  min-height: 100%;
  margin: 0 auto;
  min-width: 960px;
  max-width: 80%;
}

有什么想法吗？

Answer 1

-moz-linear-gradient(center top , #000000 0%, #30FF40 100%) repeat scroll 0 0 transparent

如果删除400px限制会怎样？

Answer 2

好的，带我去找一点，但这是你的答案：https://developer.mozilla.org/en/CSS/-moz-linear-gradient。查看“备注”部分。从本质上讲，它是一个“错误”，默认情况下背景不会填满整个容器。

基本上，使用@Jonas G. Drange建议的编辑（将最后一个值更改为100％），然后在CSS工作表中添加新规则：

html /*<-- or whatever the container element is */
{
    min-height:100%;
}

中提琴。

Answer 3

更新了我的答案:)一些Jquery将高度应用于您的ID #cont

<style type="text/css">
html, body{ margin:0px; padding:0px; background: #fff; min-width:300px/*480px*/; height:100%;}
.yourClass
{
margin:0; padding:0; display:block; overflow:hidden;
    background: #444444;    background-repeat:repeat;
    background: -moz-linear-gradient(center top, #8db849, #444444);
    width:100%; min-height:100%; 
}
#cont {
  height:320px;/*Assumed height by Jquery / whaterver, you can remove while real time*/
  margin: 0 auto;
  min-width: 960px;
  max-width: 80%;
  background:#0099CC;
}
</style>



<div class="yourClass">
    <div id="cont">
    ...
    </div>
</div>

它适合我，干杯！