CODEWITHSUNDEEP
jqueryhtmliosjquery-mobilesafari
Azzy Elvul
Azzy Elvul

Reputation: 1438

How to remove white space below the content

I have a simple page 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>
   .ui-page-theme-a {
  background-image: url(../../Resources/Bingo/WebBingo/En/Common/Images/bg.png);
  -moz-background-size-: cover;
  -o-background-size-: cover;
  -webkit-background-size-: cover;
  background-size-: cover;
}
</head>
<body >
    <div id="preloader" style='background-color: #FF5794; position: absolute; height: 100%; width: 100%; left: 0px; top: 0px;'> </div>
</body>

when I test it in safari on iPad the page can be scrolled and there is a white space below the page. How I can remove it? Removing the meta tags has no effect. I play with debug version of jquery.mobile-1.4.1 and this line seems to be related with

base = fauxEle = $( "", { "href": fauxBase }).appendTo( "head" );

in method

baseTagTest.

I remove loader from jqm so the white space not came from there

enter image description here

[1https://i.sstatic.net/2Scaw.jpg">

I don't want to use any kind of footer because my page use background and canvas.

How to remove the white line if I have an image as theme background

Upvotes: 0

Views: 878

Answers (2)

Benjamin Albert
Benjamin Albert

Reputation: 748

I'm assuming you are trying to to make the div overlap other content.

Try setting the position property to fixed as shown:

<div id="preloader" style='background-color: #FF5794; position: fixed; height: 100%; width: 100%; left: 0px; top: 0px;'> </div>

This will make the position relative to the view port. This means that when the user scrolls the div will follow the user and stay in the same place on the screen.

Upvotes: 1

Krish R
Krish R

Reputation: 22711

You can add css to your body tag,

<style>
  body{
    margin:0;
    padding:0;
  }
</style>

Upvotes: 0

Related Questions