resize 这个属性可以调整窗口大小,特别棒,但也有一些局限性
https://developer.mozilla.org/en-US/docs/Web/CSS/resize
然后附上一个特别厉害的代码,只可意会不可言传。
Html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
| <!DOCTYPE html>
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; }
html, body, div.box { height: 100%; width: 100%; }
div { box-sizing: border-box; }
div.box { display: flex; }
div.side { position: relative; height: 100%; outline: 1px solid greenyellow; }
div.content { flex: 1; height: 100%; padding: 0 10px; }
div.text { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; padding: 0 5px; background: #ffffff; }
div.bar { width: 300px; height: 100%; margin-right: -2px; overflow: scroll; resize: horizontal; }
div.bar::-webkit-scrollbar { width: 10px; height: 9999px; }
div.bar::-webkit-resizer { background: skyblue; } </style> </head>
<body> <div class="box"> <div class="side"> <div class="bar" style="width: 257px"></div> <div class="text"> 对酒当歌1,人生几何2! 譬如朝露,去日苦多3。 慨当以慷4,忧思难忘。 何以解忧?唯有杜康5。 青青子衿,悠悠我心6。 但为君故,沉吟至今7。 呦呦鹿鸣,食野之苹。 我有嘉宾,鼓瑟吹笙8。 明明如月,何时可掇9? 忧从中来,不可断绝。 越陌度阡10,枉用相存11。 契阔谈宴12,心念旧恩。 月明星稀,乌鹊南飞。 绕树三匝13,何枝可依? 山不厌高,海不厌深14。 周公吐哺,天下归心15。 [1] </div> </div> <div class="content"> 滕王阁序1 豫章故郡,洪都新府2。星分翼轸,地接衡庐3。襟三江而带五湖4,控蛮荆而引瓯越5。物华天宝,龙光射牛斗之墟6;人杰地灵,徐孺下陈蕃之榻7。雄州雾列8,俊采星驰9。台隍枕夷夏之交10,宾主尽东南之美11。都督阎公之雅望,棨戟遥临;宇文新州之懿范,襜帷暂驻12。十旬休假13,胜友如云;千里逢迎14,高朋满座。腾蛟起凤,孟学士之词宗15;紫电清霜,王将军之武库16。家君作宰,路出名区;童子何知,躬逢胜饯17。 时维九月,序属三秋18。潦水尽而寒潭清,烟光凝而暮山紫。俨骖騑于上路19,访风景于崇阿。临帝子之长洲,得天人之旧馆20。层峦耸翠,上出重霄;飞阁流丹,下临无地21。鹤汀凫渚,穷岛屿之萦回;桂殿兰宫,即冈峦之体势22。 披绣闼,俯雕甍23,山原旷其盈视,川泽纡其骇瞩24。闾阎扑地,钟鸣鼎食之家;舸舰弥津,青雀黄龙之舳25。云销雨霁,彩彻区明26。落霞与孤鹜齐飞,秋水共长天一色。渔舟唱晚,响穷彭蠡之滨27,雁阵惊寒,声断衡阳之浦28。 遥襟甫畅,逸兴遄飞29。爽籁发而清风生,纤歌凝而白云遏30。睢园绿竹,气凌彭泽之樽31;邺水朱华,光照临川之笔32。四美具33,二难并。穷睇眄于中天34,极娱游于暇日。天高地迥,觉宇宙之无穷;兴尽悲来,识盈虚之有数35。望长安于日下,目吴会于云间36。地势极而南溟深,天柱高而北辰远37。关山难越,谁悲失路之人;萍水相逢,尽是他乡之客。怀帝阍而不见,奉宣室以何年38? 嗟乎!时运不齐39,命途多舛40。冯唐易老,李广难封41。屈贾谊于长沙,非无圣主42;窜梁鸿于海曲,岂乏明时43?所赖君子见机,达人知命44。老当益壮,宁移白首之心45?穷且益坚,不坠青云之志46。酌贪泉而觉爽,处涸辙以犹欢47。北海虽赊,扶摇可接48;东隅已逝,桑榆非晚49。孟尝高洁,空余报国之情50;阮籍猖狂,岂效穷途之哭51! 勃,三尺微命52,一介书生。无路请缨,等终军之弱冠53;有怀投笔,慕宗悫之长风54。舍簪笏于百龄,奉晨昏于万里55。非谢家之宝树,接孟氏之芳邻56。他日趋庭,叨陪鲤对57;今兹捧袂,喜托龙门58。杨意不逢,抚凌云而自惜59;钟期既遇,奏流水以何惭60? 呜乎!胜地不常,盛筵难再61;兰亭已矣62,梓泽丘墟63。临别赠言,幸承恩于伟饯;登高作赋,是所望于群公64。敢竭鄙怀,恭疏短引65;一言均赋,四韵俱成66。请洒潘江,各倾陆海云尔67。 滕王高阁临江渚,佩玉鸣鸾罢歌舞。 画栋朝飞南浦云,珠帘暮卷西山雨。 闲云潭影日悠悠,物换星移几度秋。 阁中帝子今何在?槛外长江空自流。 [2] </div> </div> <script></script> </body> </html>
|