Vertically fit the div in any resolution #Mobile Web Aplication
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 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.
加载中,请稍侯......
精彩评论