css - MVC WebGrid 中 gridTable 的垂直滚动条

Question

我在我的 mvc 应用程序中使用了 WebGrid。现在我想修复 WebGrid 的高度。为此，我需要一个用于 gridTable 内容的 VerticalScrollBar。

<div class="grid-div" id="webgridid">
                @grid.GetHtml(
    tableStyle: "gridTable",
    headerStyle: "gridHead",
    footerStyle: "gridFooter",
    columns: new[]
    {
        grid.Column("name","Name", canSort: true, style: "name"),
        grid.Column("description","Description", canSort: true, style: "description"),
        grid.Column("duration","Duration", canSort: true, style: "duration"),
   })
</div>

这是我的 div，其中包含 WebGrid。我只需要 gridtable 部分的垂直滚动条，gridHead(页眉)和 gridFooter(页脚)不需要垂直滚动条。

我从 here 得到了解决方案.在那里，他们正在为包含 webGrid 的 div 设置高度，

<style type="text/css">
    .grid-div {
        width: 650px;
        height:250px;
        overflow-y:auto;
    }
</style>

但是，这里的滚动条对于 gridTable 及其页眉和页脚是常见的。所以，如果我向下滚动滚动条，那么页眉和页脚也会随着滚动条一起移动。

然后我尝试为 gridTable 设置高度，例如，

<style type="text/css">
    .gridTable {
    font-family: Arial;
    font-size: 12px;
    width: 615px;
    max-height: 275px;
    overflow-y: auto;
    display: block;
    border-collapse: collapse;
    border: solid 1px #98BF21;
    background-color: white;
    text-wrap:inherit;
    }
</style>

但是，即使它的高度大于 275px，它也不会创建垂直滚动条。会出现什么问题，如何解决？

Answer 1

设置固定的 height 加上 overflow: scroll 或 overflow: auto 应该会按预期工作。但是，当您添加 display: table 时，这将不起作用，因为当与 overflow 结合使用时，表格会忽略 height 属性，甚至 max-height 也是如此.

进一步阅读:Bugzilla Bug 26617 - table ignores height and overflow attributes

解决方案是删除 display: table 属性并使其成为普通 block /display: block;

.grid-div > div {padding:1em;}

.grid-div .gridHead {background:#000; color:#FFF;}

.grid-div .gridFooter {background:lightblue;}

.grid-div .gridTable {
  background:#CCC;
  height:100px;
  display:block;
  overflow: auto;
}

<div class="grid-div" id="webgridid">
  <div class="gridHead">.gridHead</div>
  <div class="gridTable">.gridTable <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero quasi assumenda atque, nemo molestias corrupti necessitatibus reiciendis voluptatem aliquid, id eos quam labore quos sunt quis temporibus, nisi architecto esse!</p></div>
  <div class="gridFooter">.gridFooter</div>
</div>

jsFiddle:https://jsfiddle.net/k7y29mLx/