<!DOCTYPE html> <!-- saved from url=(0062)http://yuanoook.com/file?hash=f410da66e0c121f0a44a6aeea4ad33d9 --> <html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> <title>猫爪不能在下,页脚不能在上</title> <style> *{ margin:0; padding:0; border:0; } body{ background: skyblue; text-align: right; } nav{ background: black; color:white; } button{ background: green; font-size: 1em; width:100px; height:35px; cursor:pointer; } h1,h2,h3{padding:10px;} pre{ position:fixed; text-align:left; z-index:2; } pre > style{ display:block; padding:10px 10px 10px; background:rgba(255,255,255,.7); z-index:2; } footer{ background: lightgray; } </style> <style type="text/css">#yddContainer{display:block;font-family:Microsoft YaHei;position:relative;width:100%;height:100%;top:-4px;left:-4px;font-size:12px;border:1px solid}#yddTop{display:block;height:22px}#yddTopBorderlr{display:block;position:static;height:17px;padding:2px 28px;line-height:17px;font-size:12px;color:#5079bb;font-weight:bold;border-style:none solid;border-width:1px}#yddTopBorderlr .ydd-sp{position:absolute;top:2px;height:0;overflow:hidden}.ydd-icon{left:5px;width:17px;padding:0px 0px 0px 0px;padding-top:17px;background-position:-16px -44px}.ydd-close{right:5px;width:16px;padding-top:16px;background-position:left -44px}#yddKeyTitle{float:left;text-decoration:none}#yddMiddle{display:block;margin-bottom:10px}.ydd-tabs{display:block;margin:5px 0;padding:0 5px;height:18px;border-bottom:1px solid}.ydd-tab{display:block;float:left;height:18px;margin:0 5px -1px 0;padding:0 4px;line-height:18px;border:1px solid;border-bottom:none}.ydd-trans-container{display:block;line-height:160%}.ydd-trans-container a{text-decoration:none;}#yddBottom{position:absolute;bottom:0;left:0;width:100%;height:22px;line-height:22px;overflow:hidden;background-position:left -22px}.ydd-padding010{padding:0 10px}#yddWrapper{color:#252525;z-index:10001;background:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png);}#yddContainer{background:#fff;border-color:#4b7598}#yddTopBorderlr{border-color:#f0f8fc}#yddWrapper .ydd-sp{background-image:url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png)}#yddWrapper a,#yddWrapper a:hover,#yddWrapper a:visited{color:#50799b}#yddWrapper .ydd-tabs{color:#959595}.ydd-tabs,.ydd-tab{background:#fff;border-color:#d5e7f3}#yddBottom{color:#363636}#yddWrapper{min-width:250px;max-width:400px;}</style></head> <body> <pre><style contenteditable="true"> /* 猫爪不能在下,页脚不能在上 */ /* 这是样式,可直接编辑 */ /* @footerHeight:100px; */ html{ height:100%; } body{ position: relative; box-sizing:border-box; min-height: 100%; padding-bottom: 100px; } footer{ position: absolute; bottom: 0; width: 100%; height: 100px; } </style> <button onclick="main.innerHTML += main.innerHTML;">点击增加正文</button> <button onclick="main.innerHTML = main.innerHTML.slice(0,Math.max(19,main.innerHTML.length/2));">点击减少正文</button> </pre> <nav> <h2>我是页头,我就是在上面</h2> </nav> <main> <h1>猫爪不能在下,页脚不能在上</h1> <div id="main"> <p>我是正文,我内容忽多忽少</p> </div> </main> <footer> <h2>我是页脚,我不能离开下面</h2> </footer> </body></html>
demo:
http://yuanoook.com/file?hash=f410da66e0c121f0a44a6aeea4ad33d9
时间: 2024-11-08 21:25:10