Vertically fit the div in any resolution #Mobile Web Aplication _问答_开发者

Vertically fit the div in any resolution #Mobile Web Aplication

开发者 https://www.devze.com 2023-02-10 15:08 出处：网络

trying to ma开发者_StackOverflow中文版king a mobile web aplication 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 ric

相关专题：css xhtml

trying to ma开发者_StackOverflow中文版king a mobile web aplication

Vertically fit the div in any resolution #Mobile Web Aplication

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

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.