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

你忘了把“;”高度

#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

如果您想垂直滚动，请使用＆＃34; overflow-y＆＃34; CSS属性。将其值设置为＆＃34; auto＆＃34;如果在内部没有足够的元素或者滚动＆＃34;滚动＆＃34;一直显示滚动条。

More info.

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

2 个答案: