Search code examples
javascriptcssui-design

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>


Solution

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