MVC中gridTable的垂直滚动条WebGrid

Question

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

<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合并时，表格忽略高度属性，即使max-height也是如此。

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

的解决方案将是，以除去display: table属性，并使其成为正常块/ 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/