背景渐变结束并且不再继续

Question

我的 body 元素下有一个 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

如果取消 400 像素限制会发生什么？

Answer 2

也更新了我的答案:) 一些 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>

它对我有用，干杯！

Answer 3

好吧，我花了一点时间才找到这个，但这是你的答案： https:// /developer.mozilla.org/en/CSS/-moz-linear-gradient。查看“注释”部分。本质上，这是一个“错误”，默认情况下背景不会填充整个容器。

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

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

Viola。