移动页面框架头尾固定中间滚动 absolute模拟fixed

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>absolute模拟fixed</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <style>
    html,
body{height:100%;margin:0;padding:0;}
header,footer{height:40px; text-align:center; position:absolute; width:100%; line-height:40px; background:#fff; z-index:2;}
header{border-bottom:1px solid #ccc;top:0;}
footer{border-top:1px solid #ccc;bottom:0;}
h1{margin:0; }
.content{position:absolute;top:40px;left:0;right:0;bottom:40px; box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch;}
    </style>
  </head>
  <body>

    <!-- Make sure all your bars are the first things in your <body> -->
    <header class="bar bar-nav">
      <h1 class="title">header</h1>
    </header>
    
    <!-- Wrap all non-bar HTML in the .content div (this is actually what scrolls) -->
    <div class="content">
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2><input /></h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content</h2>
      <h2>content-last</h2>
    </div>
    <footer class="bar bar-footer">
      <h1 class="title">footer</h1>
    </footer>
  </body>
</html>


你可能感兴趣的:(移动页面框架,头尾固定中间滚动,absolute模拟fixed)