如上图，要求：使用纯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 谢谢 经测试 可用。
BigDecimal method to compare sizes
How to turn off the firewall
html online editor
Bitcoin buying and selling process on Huobi.com
The server cannot be found on the computer solution
How Oracle creates a database
Introduction to the usage of sort() function in python
Which key should I press to recover when I can't type on my computer keyboard?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
