Home/ Questions/Q 5992933
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T23:36:11+00:00

trying to making a mobile web aplication I need to fit that white bg

  • 0

trying to making a mobile web aplication

enter image description here

I need to fit that white bg in to the bottom using css when it has minimal content… and also the scroll will appear for the rich content

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The easiest method is to leverage the jQuery Mobile project alongside some best practice CSS for height and a little extra script.

    Here’s a basic boiler plate for you to work with.

    <!DOCTYPE html> 
<html> 
  <head> 
    <meta content='yes' name='apple-mobile-web-app-capable'> 
    <meta content='default' name='apple-mobile-web-app-status-bar-style'> 
    <meta content='width=device-width, minimum-scale=1.0, maximum-scale=1.0' name='viewport'> 
    <title>Example jQuery Mobile / Full-Height Content</title> 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js' type='text/javascript'></script> 
    <script src='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js' type='text/javascript'></script> 

    <style>
      @media screen and (orientation: landscape) {
        html, body {
          width: 100%;
        }

        .content h1.landscape { display: block }
        .content h1.portrait { display: none }
      }
      @media screen and (orientation: portrait) {
        html, body {
          width: 100%;
        }

        .content .landscape { display: none }
        .content .portrait { display: block }
      }
    </style>
    <link href='http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css' rel='stylesheet'> 
  </head> 
  <body> 
    <div data-role='page' data-theme='a'> 
      <div class='header' data-role='header'> 
        <h1>header</h1> 
      </div> 
      <div class='content' data-role='content'> 
        <h1 class="landscape">landscape!</h1> 
        <h1 class="portrait">portrait!</h1> 
      </div> 
      <div class='footer' data-role='footer'> 
        Nothing to see here.
      </div> 
    </div> 
    <script>
      (function() {
        var fixgeometry = function() {
          /* Some orientation changes leave the scroll position at something
           * that isn't 0,0. This is annoying for user experience. */
          scroll(0, 0);

          /* Calculate the geometry that our content area should take */
          var header = $(".header:visible");
          var footer = $(".footer:visible");
          var content = $(".content:visible");
          var viewport_height = $(window).height();

          var content_height = viewport_height - header.outerHeight() - footer.outerHeight();

          /* Trim margin/border/padding height */
          content_height -= (content.outerHeight() - content.height());
          content.height(content_height);
        }; /* fixgeometry */

        $(document).ready(function() {
          $(window).bind("orientationchange resize pageshow", fixgeometry);
        });
      })();
    </script> 
  </body> 

</html>

    Hope this helps get you started.

    • 0