如何在固定导航栏下方制作可滚动div

Question

the expected outcome looks like this: not on top of the navbar, start from the bottom of the navbar

instead of: start from the very top

I want it to be inside a DIV only.

Here's part of my code:

<div>
  <navbar style=" position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   overflow: hidden;
   height: 70px"/>
  <div style="margin-top:80px">
    I want a scroll right in this DIV. 
  </div>
<div>

Answer 1

This can be achieved with both top position or padding/margin. Check my working snippet:

 body { padding: 0; margin: 0; } .navbar{ height: 60px; /* notice this value */ width: 100%; background: red; } .myScrollableDiv { position: fixed; top: 60px; /* same height as navbar */ left: 0; right: 0; bottom: 0; overflow-y: scroll; background: green; color: #fff; } 

 <div class="navbar"></div> <div class="myScrollableDiv"> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> <p>Test</p> </div> 

On your scaffolding:

 <div style="height: 100%"> <navbar style=" position: fixed; top: 0; left: 0; right: 0; width: 100%; height: 70px; background: red"/> <div style="margin-top:0px; margin-top: 70px; overflow-y: scroll; height: 100px"> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> I want a scroll right in this DIV. <br /> </div> <div>