Beginnerprogrammer Beginnerprogrammer - 9 days ago 6
CSS Question

jquery mobile and CSS fixed gradient for every page the same

I have several pages where I use an gradient as background and an footer which matches the bottom gradient color. Thereby I have a second page which is longer than the dashboard page and the footer mismatches the color. I would like to set an static gradient for each and every page.

As you can see
enter image description here

This is how I styled the background:

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


and this is the styling of the footer:

.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

you could try this.
separate the viewport in 2 sections:

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 */
}