<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>fixed解決方案</title> <script src="../jsDemo/jquery-1.8.2.min.js?3393"></script> <styl ...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>fixed解決方案</title>
<script src="../jsDemo/jquery-1.8.2.min.js?3393"></script>
<style>
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
background-color: plum;
}
body {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.other {
position: fixed;
width: 100%;
height: 5rem;
line-height: 5rem;
text-align: center;
background-color: orangered;
z-index: 10000;
}
.container2 {
width: 100%;
height: 100%;
margin-top: 5rem;
margin-bottom: 3rem;
box-sizing: border-box;
background-color: greenyellow;
}
.container2 .item {
height: 4rem;
line-height: 4rem;
text-align: center;
border-bottom: solid 2px gray;
}
.button {
position: fixed;
bottom: 0;
width: 100%;
height: 3rem;
line-height: 3rem;
text-align: center;
background-color: #00b3ee;
}
</style>
</head>
<body>
<div class="other">其 他</div>
<div class="container2" id="container2">
<div>
<div class="item">項目0</div>
<div class="item">項目1</div>
<div class="item">項目2</div>
<div class="item">項目3</div>
<div class="item">項目4</div>
<div class="item">項目5</div>
<div class="item">項目6</div>
<div class="item">項目7</div>
<div class="item">項目8</div>
<div class="item">項目9</div>
</div>
</div>
<div class="button">按 鈕</div>
<script src="http://momo-project.b0.upaiyun.com/Assets/IOS_FIXED/iscroll-infinite.js"></script>
</body>
</html>
<script type="text/javascript">
function resetFontSize() {
if (navigator.userAgent.indexOf('Mobile') !== -1) {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1440 * 100 + 'px';
} else {
document.documentElement.style.fontSize = document.documentElement.clientHeight / 1440 * 50 + 'px';
}
}
window.addEventListener('resize', resetFontSize, false);
resetFontSize();
var $container2 = document.querySelector('.container2');
var $other = document.querySelector('.other');
var $button = document.querySelector('.button');
$container2.style.height = (document.documentElement.clientHeight - $other.clientHeight - $button.clientHeight) + 'px';
var myScroll = new IScroll('#container2', {
mouseWheel: true,
scrollbars: true
});
</script>
