美文网首页
用absoulte模仿fixed

用absoulte模仿fixed

作者: shaguamayi | 来源:发表于2018-06-22 11:17 被阅读0次
   
<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>lottery</title>

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <meta name="apple-mobile-web-app-capable" content="yes" />

    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

    <meta name="format-detection"  content="telephone=no">

    <meta  http-equiv="x-rim-auto-match" content="none">

    <style type="text/css">

    *{

      margin:0;

      padding: 0

    }

    </style>

  </head>

  <body style=''>

    <div style='position:absolute;top:0;left:0;right:0;bottom:0;background: green'>

    <div id='nihao' style='overflow: scroll;-webkit-overflow-scrolling:touch;min-height:100%;max-height:100%;position:relative;'>

   <div id="myDiv" class="nihao">

      <div class="nihaolist">1</div>

      <div class="nihaolist">2</div>

      <div class="nihaolist">3</div>

      <div class="nihaolist">4</div>

      <div class="nihaolist">5</div>

      <div class="nihaolist">6</div>

      <div class="nihaolist">7</div>

      <div class="nihaolist">8</div>

      <div class="nihaolist">9</div>

      <div class="nihaolist">10</div>

      <div class="nihaolist">11</div>

      <div class="nihaolist">12</div>

      <div class="nihaolist">13</div>

      <div class="nihaolist">14</div>

    </div>

    <div id="myDiv" class="nihao">

      <div class="nihaolist">1</div>

      <div class="nihaolist">2</div>

      <div class="nihaolist">3</div>

      <div class="nihaolist">4</div>

      <div class="nihaolist">5</div>

      <div class="nihaolist">6</div>

      <div class="nihaolist">7</div>

      <div class="nihaolist">8</div>

      <div class="nihaolist">9</div>

      <div class="nihaolist">10</div>

      <div class="nihaolist">11</div>

      <div class="nihaolist">12</div>

      <div class="nihaolist">13</div>

      <div class="nihaolist">14</div>

    </div>

    <div id="myDiv" class="nihao">

      <div class="nihaolist">1</div>

      <div class="nihaolist">2</div>

      <div class="nihaolist">3</div>

      <div class="nihaolist">4</div>

      <div class="nihaolist">5</div>

      <div class="nihaolist">6</div>

      <div class="nihaolist">7</div>

      <div class="nihaolist">8</div>

      <div class="nihaolist">9</div>

      <div class="nihaolist">10</div>

      <div class="nihaolist">11</div>

      <div class="nihaolist">12</div>

      <div class="nihaolist">13</div>

      <div class="nihaolist">14</div>

    </div>

    <div id="myDiv" class="nihao">

      <div class="nihaolist">1</div>

      <div class="nihaolist">2</div>

      <div class="nihaolist">3</div>

      <div class="nihaolist">4</div>

      <div class="nihaolist">5</div>

      <div class="nihaolist">6</div>

      <div class="nihaolist">7</div>

      <div class="nihaolist">8</div>

      <div class="nihaolist">9</div>

      <div class="nihaolist">10</div>

      <div class="nihaolist">11</div>

      <div class="nihaolist">12</div>

      <div class="nihaolist">13</div>

      <div class="nihaolist">14</div>

    </div>

    <div id="myDiv" class="nihao">

      <div class="nihaolist">1</div>

      <div class="nihaolist">2</div>

      <div class="nihaolist">3</div>

      <div class="nihaolist">4</div>

      <div class="nihaolist">5</div>

      <div class="nihaolist">6</div>

      <div class="nihaolist">7</div>

      <div class="nihaolist">8</div>

      <div class="nihaolist">9</div>

      <div class="nihaolist">10</div>

      <div class="nihaolist">11</div>

      <div class="nihaolist">12</div>

      <div class="nihaolist">13</div>

      <div class="nihaolist">14</div>

    </div>

    </div>

    </div>

    <div style='position: absolute;bottom:0;left:0;width:100%;height:30px;background: red'></div>

<script type="text/javascript">

// 'use strict';

// var a="";

// var b="nn";

// var y=a||b

// // abc = 'Hello, world';

// // console.log(abc);

// var s = 'Hello, world!';

// s[0]; // 'H'

// s[6]; // ' '

// s[7]; // 'w'

// s[12]; // '!'

// s[13]; 

// console.log(s[5]);

// var arr=[2,1,3]

// arr.length=4;

// arr[5]='09'

// console.log(arr.indexOf('09'));

// var arr1 = ['arr', '444', '2222', '5', '6', '2', '1'];

// var a=arr1.reverse();

// console.log(a);

// window.scrollTo(0,200); 

// document.getElementById('nihao').style.height=document.body.scrollHeight-30+'px'

// console.log(Math.max(document.body.scrollHeight));

//     function defineReactive (obj, key, val) {

//   Object.defineProperty (obj, key, {

//     get: function () {

//       return val;

//     },

//     set: function (newValue) {

//       val = newValue;

//     }

//   })

// };

// // 创建对象

// var person = {};

// // 添加两个响应式属性

// defineReactive (person, 'age', 25);

// defineReactive (person, 'country', 'Brazil');

// // 现在你可以使用这两个属性

// if (person.age < 18) {

//   return 'minor';

// }

// else {

//   return 'adult';

// }

// // 也可以给他们赋值

// person.country = 'Russia';

</script>

  </body>

</html>

相关文章

网友评论

      本文标题:用absoulte模仿fixed

      本文链接:https://www.haomeiwen.com/subject/btckyftx.html