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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.