引导可滚动的 div

Question

我想制作一个始终与屏幕高度相同的 div，即使其中包含更多内容。 div 显示 的列表，如果屏幕中包含的内容超出了 div 的范围，则会在 div 的一侧显示滚动条。

<div class = "Row">
   <div class ="col-sm-2">
       <ul>
           <li>
               <h1>record1</h1>
           </li>
           <li>
               <h1>record2</h1>
           </li>
       </ul>
   </div>
</div> 

我在网上搜索过，但只找到了与我的问题无关的答案，例如可滚动模式和其他滚动问题。请用步骤和完整代码充分解释您的答案。

Answer 1

默认情况下，网页的body 仅与放入其中的内容一样高，因此我们需要告诉它是全视口高度（浏览器窗口的大小）

html, body {
  margin: 0;
  height: 100%;
}

现在，为了让您的 row div 也成为全高度，我们将其设置为高度

.row {
  height: 100%;
}

最后，为了在内容超过高度时出现滚动条，我们添加

.row {
  overflow: auto;
}

我刚刚添加的background: #eee; 覆盖了整个浏览器窗口

height: 100% 现在将使row div 自动填满整个视口（浏览器窗口），无论大小或调整大小。

示例代码sn-p

html, body {
  margin: 0;
  height: 100%;
}
.row {
  height: 100%;
  background: #eee;
  overflow: auto;
}

<div class = "row">
   <div class ="col-sm-2">
       <ul>
           <li>
               <h1>record1</h1>
           </li>
           <li>
               <h1>record2</h1>
           </li>
           <li>
               <h1>record3</h1>
           </li>
           <li>
               <h1>record4</h1>
           </li>
           <li>
               <h1>record5</h1>
           </li>
           <li>
               <h1>record6</h1>
           </li>
       </ul>
   </div>
</div>