jquery 移动版和 CSS 固定版每个页面的渐变相同

Question

我有几个页面使用渐变作为背景和与底部渐变颜色相匹配的页脚。因此，我有第二页，它比仪表板页面长，页脚颜色不匹配。我想为每一页设置静态渐变。

如你所见

这就是我设置背景样式的方式：

.background {
     background-image: -webkit-linear-gradient(#00cef4,#00a0e5);
     background-repeat:repeat-x;
     background-size: 100% 100%;
     -o-background-size: 100% 100%;
     -moz-background-size: 100% 100%;
     -webkit-background-size: 100% 100%;
}

这是页脚的样式：

.ui-footer {
    background-image: linear-gradient(#00a6e7, #00a0e5);
    border-color: transparent !important
}

.footer a:after {
    background-color: transparent !important;
    /*border-color: transparent !important;*/
    height: 70px;
}

.ui-footer, .footer, .footer li, .footer a {
    height: 70px;
}

Answer 1

颜色不匹配不是因为主要部分和页脚的高度 - 这部分按照您的方式做的很好。

您的主要问题是渐变颜色的顺序 - 渐变颜色的顺序非常精确地不匹配。

解释：

目前您的订单是

lightest - color 1 - main start
...
..darker..
..darker..
..
darkest - color 2 - main end
lighter - color1 - footer start(this is the mismatch - this should be the same color as the last(darkest))
..darker..
..darker..
darkest - color 2 - footer end

所以正确的顺序应该是（下）

lightest - color 1 - main start
...
..darker..
..darker..
..
darkest - color 2 - main end
darkest - color2 - footer start
..even more darker..
..even more darker..
darkest - color 3 - footer end

解决方案

只需交换页脚的渐变颜色即可匹配。像这样

.ui-footer {
    background-image: linear-gradient(#00a0e5, #00a6e7); //colors swapped to match main sections color
    border-color: transparent !important
}

Answer 2

你可以试试这个。
将视口分成两部分：

html:

<body>
  <div class="content">everything goes here</div>
  <div class="footer">buttons go here </div>
</body>

css:

.content{
  height: 100vh; /* full display size */
  overflow-y: auto; /* everything bigger will scroll like normal */
  padding-bottom: 45px; /* Whatever height you give the icon section */
  box-sizing: border-box; /* this + the padding will make sure your content stops extactly where the footer sta */
}
.footer{
  position: absolute;
  bottom: 0;
  height: 45px;
}
body{
  /* gradient stuff here */
}

jquery 移动版和 CSS 固定版每个页面的渐变相同

jquery mobile and CSS fixed gradient for every page the same

html

css

jquery-mobile