尝试制作移动网络应用
当内容最少时，我需要使用 css 将白色 bg 放入底部......并且滚动条也会出现在内容丰富的地方
最佳答案
最简单的方法是利用 jQuery Mobile 元素以及一些针对高度的最佳实践 CSS 和一些额外的脚本。
这是供您使用的基本样板。
<!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>
希望这有助于您入门。
关于css - 在任何分辨率下垂直调整 div #Mobile Web Application，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4993246/