如何设置内容和左侧菜单的单独滚动

Question

Below my output how to set individual scroll for content and left menu , while we scroll in content, content only scroll not left menu same as left menu 在我的输出下方，如何设置内容和左菜单的单独滚动，当我们滚动内容时，内容仅滚动而不是左菜单与左菜单相同

Is it possible to do in css or javascript ? 是否可以在CSS或JavaScript中执行？

 #header { background-color: black; color: white; text-align: center; padding: 5px; } #nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 5px; overflow-y: scroll; } #section { width: 350px; float: left; padding: 10px; height:350px overflow-y: scroll; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; }

 <!DOCTYPE html> <html> <body> <div id="header"> </div> <div id="nav" style="height:1500px"> London <br>Paris <br>Tokyo </div> <div id="section"> <h2>London</h2> <p style="height:150px">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> <div id="footer"> Copyright © W3Schools.com </div> </body> </html>

Answer 1

U forgot to put ";" 你忘了放“;” in height 身高

 #header { background-color: black; color: white; text-align: center; padding: 5px; } #nav { line-height: 30px; background-color: #eeeeee; height: 300px; width: 100px; float: left; padding: 5px; overflow-y: scroll; } #section { width: 350px; float: left; padding: 10px; height:350px; overflow-y: auto; } #footer { background-color: black; color: white; clear: both; text-align: center; padding: 5px; }

 <!DOCTYPE html> <html> <body> <div id="header"> </div> <div id="nav" style="height:150px"> London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo London <br>Paris <br>Tokyo </div> <div id="section"> <h2>London</h2> <p style="height:150px">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <h2>London</h2> <p style="height:150px">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <h2>London</h2> <p style="height:150px">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <h2>London</h2> <p style="height:150px">London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div> <div id="footer"> Copyright © W3Schools.com </div> </body> </html>

Answer 2

If you would like to scroll vertically use "overflow-y" CSS property. 如果您想垂直滚动，请使用“ overflow-y” CSS属性。 Set it value to "auto" if there shouldn't be scroll if inside there is no enough elements or "scroll" to show scrollbar all the time. 如果内部没有足够的元素，则不应该滚动，将其值设置为“自动”；或者将“滚动”设置为始终显示滚动条。

More info. 更多信息。

如何设置内容和左侧菜单的单独滚动

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-12-17 10:14:40

解决方案2
0 2015-12-17 09:45:36

如何设置内容和左侧菜单的单独滚动

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-12-17 10:14:40

解决方案2 0 2015-12-17 09:45:36

解决方案1
1 已采纳 2015-12-17 10:14:40

解决方案2
0 2015-12-17 09:45:36