我正在使用 bootstrap、angular 和 angular-ui-router
我想要实现的是这个模型:
左侧的菜单是导航栏、顶部的工具栏、一些面包屑、内容和页脚。
我可以准备好所有这些元素。但是，我需要使用来自其余数据源的可变数量的元素来填充内容。我想很好地包装这些，所以我使用以下 Angular/html
<div class="col-lg-12 ">
<div class="row">
<div class="col-md-4 " ng-repeat-start="item in $ctrl.items">
<div> card details here </div>
<div class="clearfix" ng-if="$index % 3 === 2"></div>
<div ng-repeat-end=""></div>
</div>
</div>
</div>这有效，并显示所有数据。但是，由于数据超出了 div 的容量，滚动条出现在窗口上
我想要实现的是让滚动条出现在内容div中，就像截图一样
我已经尝试了各种 css，例如 overflow: scroll-y，但无法弄明白。
最佳答案
您的问题似乎与动态 heights 有关.使用固定 heights (也可以使用 %、vh、...)，您可以使该布局正常工作。有很多解决方案。
<强>1。使用 %
如果你打算使用 %，那将是迄今为止最好的选择，你必须从根标签开始，它基本上是 <html> .之后，您必须将适当的高度值添加到您要使用的子元素中。请记住从 100% 开始并将您的子元素缩小到所需的高度。
<强>2。使用 vh
vh 值与 % 有点相同。您只是不需要为每个父元素设置高度。 Demo
注意:您可能需要 check如果这适用于您的目标浏览器。
<强>3。 CSS3 calc() 函数
可能是最新的方法。您可以通过 CSS(3) 计算值，例如使用calc(100% - 100px) .虽然这很酷，但并非所有浏览器都支持。参见 here .
<强>4。固定布局
您也可以使用一些固定的定位。将页脚、页眉和导航设置为 position: fixed;也会保持一切顺利和干净。我会使用固定布局来完成它，因为我最喜欢它。此外，它与旧版浏览器没有任何不兼容性。
关于css - Bootstrap 、网格和滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40442881/