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自动填满整个视口（浏览器窗口），无论大小或是否调整大小。

示例代码段

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>

Bootstrap可滚动div

1 个答案: