1

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 ?

#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>
Holger
  • 285,553
  • 42
  • 434
  • 765
Nelson
  • 383
  • 4
  • 17

2 Answers2

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>
Suresh B
  • 1,658
  • 1
  • 17
  • 35
0

If you would like to scroll vertically use "overflow-y" CSS property. 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.

Michał Dopieralski
  • 450
  • 2
  • 14