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

Question

在我的输出下方如何为内容和左侧菜单设置单独滚动，当我们滚动内容时，内容只滚动而不是左侧菜单与左侧菜单相同

是否可以在 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

如果您想垂直滚动，请使用 "overflow-y" CSS 属性。如果内部没有足够的元素或 "scroll" 始终显示滚动条，则将其值设置为 "auto" 如果不应该滚动。

More info.

Answer 2

你忘了放“;”身高

#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>

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

how to set individual scroll for content and left menu

javascript

css

ui-design