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

Question

预期结果如下： not on top of the navbar, start from the bottom of the navbar

代替： start from the very top

我希望它仅位于DIV中。

这是我的代码的一部分：

<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

这可以通过顶部位置或填充/边距来实现。 查看我的工作片段：

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>

在您的脚手架上：

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