Фоновый градиент заканчивается и не продолжается - PullRequest
Новая
       12

Фоновый градиент заканчивается и не продолжается

0 голосов
/ 27 сентября 2011

У меня есть div под элементом тела. У этого есть тот фон CSS: 

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

Внутри моего div есть таблица данных (таблица jqGrid). Я думаю, что после того, как моя страница загрузится, эта таблица сетки получит место на моей странице. Поэтому мой градиентный фон где-то заканчивается, и внизу моей страницы есть пробел (на других страницах нет данных, все в порядке).

Как я могу решить это?

EDIT:

Моя проблема такова: enter image description here

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%;
}

Есть идеи?

Ответы [ 3 ]

1 голос
/ 27 сентября 2011 
-moz-linear-gradient(center top , #000000 0%, #30FF40 100%) repeat scroll 0 0 transparent

Что произойдет, если вы удалите ограничение в 400px?

0 голосов
/ 27 сентября 2011

Также обновил мой ответ :) Некоторые 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>

Это работает для меня, ура!

0 голосов
/ 27 сентября 2011

Хорошо, мне понадобилось немного времени, чтобы найти это, но вот ваш ответ: 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.

...