Градиент идет только к краю экрана - не html (html / css на мобильном телефоне)

Question

Градиент идет только к краю экрана - не html (html / css на мобильном телефоне)

0

Я играю с этим весь день, и я не могу понять все правильно. Существует светло-зеленый или темно-зеленый фон градиента, который я установил непосредственно в код html, body {}. Это веб-страница, которую вытаскиваете в приложение, но я также использую Chrome для доступа к странице, как и любая другая веб-страница, и результаты одинаковы.

Я пока не могу добавить изображения (низкий уровень репутации и все), и поскольку это банковское приложение на наших персональных серверах, меня попросили не связывать никого. Итак, здесь мой код (куски, которые, я считаю, актуальны).

Кажется, что сначала нужно заполнить нижнюю часть последнего div в градиенте, а затем применить градиент к самому самому фону (когда я расширяю окно, "нижний" градиент изменяется как вытягивание, а тот, divs не изменяется). На моем телефоне (nexus 4 android) градиент заполняет исходный экран на 100%, но все, что ниже, получает его собственный градиент так же, как и выше (иначе, если я прокручиваю, там есть четкая линия, где внизу экрана был).

Я пробовал установить html, тело с высотой: 100%, min-height: 100%, или max-height: 100%, и никто не делает трюк. Min-height, вероятно, был самым близким, поскольку два других отображали простой цвет фона вместо "второго" градиента.

EDIT: Попытка объяснить лучше... так как я не могу сделать снимок экрана, как насчет диаграммы: P

--------------------
|  |   (A)       | |   <--- if this is the main page....
|  |            <---------- then (A) is the total area of my content
|  |             | |        to the bottom of my last div.
|  --------------- |        The gradient fills the main page to the bottom
|                  |        of (A) (which spans the full width, poorly represented).
|                  |        But then the entire thing seems to have it own gradient
|                  |        as well that fills in behind (A) and flows to the bottom,
--------------------        and on a mobile device, the bottom line of (A) is not 
                            the bottom of the last div, but the bottom of the
                            device screen. So when you scroll, that bottom line
                            scrolls up with the rest of the content and there is a
                            second gradient background that fills the rest of the area 
                            like it supposed to. But the gradient is only applied
                            to one area in the CSS, nowhere else.

Как это исправить?

html, body
{
    background: #627d4d;
    background: -moz-linear-gradient(top,  #627d4d 0%, #1f3b08 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#627d4d), color-stop(100%,#1f3b08)); 
    background: -webkit-linear-gradient(top,  #627d4d 0%,#1f3b08 100%);
    background: -o-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); 
    background: -ms-linear-gradient(top,  #627d4d 0%,#1f3b08 100%); 
    background: linear-gradient(to bottom,  #627d4d 0%,#1f3b08 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#627d4d', endColorstr='#1f3b08',GradientType=0 );
    min-height: 100%;
    font-family: "Helvetica", sans-serif;
    font-size: 12px;
    margin: 0;
    padding: 0;
}

.container
{
    width: 100%;
    min-height: 100%;
    margin: auto;
}

<html xmlns="http://www.w3.org/1999/xhtml" >
....
</head>
<body>
  <form id="frm" class="container" runat="server">

        <div class="topBar">
....

Christina Kline 03 янв. 2014, в 23:18

Источник

Теги:

html

android

css3

1 ответ

Ещё вопросы

smts · Accepted Answer · 2014-01-03T22-33-00.000Z

Надеюсь, я правильно понял ваш вопрос:

Если я это сделаю, у вас будет большая часть кода. Вы хотите сохранить margin: 0 а также min-height. В принципе, вы хотите, чтобы ваш фон был фиксированным, чтобы "держать его на месте", даже когда надпись над ним прокручивается.

Попробуйте добавить это чуть ниже padding: 0;...

background-repeat: no-repeat;
background-attachment: fixed;