CODEWITHSUNDEEP
javascriptcssui-design
Nelson
Nelson

Reputation: 383

how to set individual scroll for content and left menu

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>

Upvotes: 1

Views: 72

Answers (2)

Suresh B
Suresh B

Reputation: 1652

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>

Upvotes: 1

Michał Dopieralski
Michał Dopieralski

Reputation: 450

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.

Upvotes: 0

Related Questions