如上图，要求：使用纯css实现，不使用js
想了半天没想到好的办法实现
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><style>*{ margin:0; padding:0;}html,body{ width:100%;height:100%}.b{ /*设置元素宽度包含边框宽度**/box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }main{margin-top:-50px;margin-left:-200px;padding-left:200px; padding-top:50px;overflow-y:scroll;float:left;background:#FF0000; width:100%; height:100%;}#left{ float:left; width:200px; height:100%; padding-top:50px; margin-top:-50px;overflow-y:scroll; background:#0000FF; z-index:2; position:relative }</style> </head><body><header style=" line-height:50px;height:50px; background:#666666; color:#FFFFFF; text-align:center;z-index:3; position:relative"> width:100%;height:50px;</header><div id="left" class="b" > <!--用于展示部分--> <div style="width:100%; height:33%; background:#00FF00">1</div> <div style="width:100%; height:33%; background:#666">2</div> <div style="width:100%; height:33%; background:#09F">3</div> <div style="width:100%; height:33%; background:#3C0">4</div> <div style="width:100%; height:33%; background:#3FF">5</div> <div style="width:100%; height:33%; background:#F3C">6</div> <!----------></div><main class="b"> <!--用于展示部分--> <div style="width:100%; height:33%; background:#3C0">1</div> <div style="width:100%; height:33%; background:#F3C">2</div> <div style="width:100%; height:33%; background:#3FF">3</div> <div style="width:100%; height:33%; background:#09F">4</div> <div style="width:100%; height:33%; background:#666">5</div> <div style="width:100%; height:33%; background:#00FF00">6</div> <!--------------></main</body></html>试试:table-cell+table-row
@q81999008
现在你的这个例子有一个小问题，就是 左侧的滚动条看不到上面的箭头。有没有更好的体验办法
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/><style>*{ margin:0; padding:0;}html,body{ width:100%;height:100%}.b{ /*设置元素宽度包含边框宽度**/box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; }main{margin-top:-50px;margin-left:-200px;padding-left:200px; padding-top:50px;float:left;background:#FF0000; width:100%; height:100%;}#left{ float:left; width:200px; height:100%; padding-top:50px; margin-top:-50px; background:#0000FF; z-index:2; position:relative }</style> </head><body><header style=" line-height:50px;height:50px; background:#666666; color:#FFFFFF; text-align:center;z-index:3; position:relative"> width:100%;height:50px;</header><div id="left" class="b"> <div style=" overflow-y:scroll; height:100%; width:100%"> <!--用于展示部分--> <div style="width:100%; height:33%; background:#00FF00">1</div> <div style="width:100%; height:33%; background:#666">2</div> <div style="width:100%; height:33%; background:#09F">3</div> <div style="width:100%; height:33%; background:#3C0">4</div> <div style="width:100%; height:33%; background:#3FF">5</div> <div style="width:100%; height:33%; background:#F3C">6</div> <!----------> </div></div><main class="b"> <div style=" overflow-y:scroll; height:100%; width:100%"> <!--用于展示部分--> <div style="width:100%; height:33%; background:#3C0">1</div> <div style="width:100%; height:33%; background:#F3C">2</div> <div style="width:100%; height:33%; background:#3FF">3</div> <div style="width:100%; height:33%; background:#09F">4</div> <div style="width:100%; height:33%; background:#666">5</div> <div style="width:100%; height:33%; background:#00FF00">6</div> <!--------------> </div></main</body></html>@q81999008 谢谢 经测试 可用。
Méthodes de lecture et d'écriture de fichiers Java DBF
ps luminosité contraste touches de raccourci
Supprimer le champ du tableau
utilisation de la fonction js
Analyse comparative de vscode et visual studio
Comment résoudre le problème selon lequel le dossier n'a pas d'options de sécurité
Dogecoin prix d'aujourd'hui
psp3000 fissure
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
