无论浏览器窗口大小如何，CSS都将<div>锁定到位？</div>

Question

我已将GRIDMvc的使用纳入我的MVC5 / EF Code-First应用程序中。

<div class="assetList">

    @*Images in Columns: https://gridmvc.codeplex.com/discussions/440977*@
    @try
    {
        @Html.Grid(Model).Columns(columns =>
        {
            columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Edit/@o.Id" class="btn btn-primary btn-sm noDecoration"><span class="glyphicon glyphicon-pencil"></span> @*Edit*@</a>).SetWidth(15);
            columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Delete/@o.Id" class="btn btn-danger btn-sm noDecoration"><span class="glyphicon glyphicon-remove-circle"></span> @*Delete*@</a>).SetWidth(15);
            columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="#" class="btn btn-default btn-sm noDecoration verifyBtn" onclick="verifyAsset(@o.Id)"><span class="glyphicon glyphicon-ok"></span> @*View*@</a>).SetWidth(15);
            @*columns.Add().Encoded(false).Sanitized(false).RenderValueAs(o => @<a href="/INV_Assets/Details/@o.Id" class="btn btn-default btn-sm noDecoration"><span class="glyphicon glyphicon-eye-open"></span> @*View*</a>).SetWidth(15);*@
            columns.Add(o => o.Status.status_description).Titled("Status").RenderValueAs(o => o.Status.status_description).Sanitized(false).Encoded(false).Sortable(true).Filterable(true).SetWidth(20);
            columns.Add(o => o.Location.location_dept).Titled("Dept").RenderValueAs(o => o.Location.location_dept).SetWidth(20);
            columns.Add(o => o.Location.location_room).Titled("Room").RenderValueAs(o => o.Location.location_room).SetWidth(20);
            columns.Add(o => o.owner).Titled("Owner").RenderValueAs(o => o.owner).SetWidth(20);
            columns.Add(o => o.Type.type_description).Titled("Type").RenderValueAs(o => o.Type.type_description).SetWidth(20);
            columns.Add(o => o.Manufacturer.manufacturer_description).Titled("Manufacturer").RenderValueAs(o => o.Manufacturer.manufacturer_description).SetWidth(20);
            columns.Add(o => o.Model.model_description).Titled("Model").RenderValueAs(o => o.Model.model_description).SetWidth(20);
            columns.Add(o => o.Vendor.vendor_name).Titled("Vendor").RenderValueAs(o => o.Vendor.vendor_name).SetWidth(20);
            columns.Add(o => o.description).Titled("Desc").RenderValueAs(o => o.description).SetWidth(20);
            columns.Add(o => o.asset_tag_number).Titled("Asset Tag #").RenderValueAs(o => o.asset_tag_number).SetWidth(20);
            columns.Add(o => o.serial_number).Titled("Serial #").RenderValueAs(o => o.serial_number).SetWidth(20);
            columns.Add(o => o.ip_address).Titled("IP Addr").RenderValueAs(o => o.ip_address).SetWidth(20);
            columns.Add(o => o.mac_address).Titled("Mac Addr").RenderValueAs(o => o.mac_address).SetWidth(20);
            columns.Add(o => o.po_number).Titled("PO #").RenderValueAs(o => o.po_number).SetWidth(20);
            columns.Add(o => o.invoice_number).Titled("Inv. #").RenderValueAs(o => Convert.ToString(o.invoice_number)).SetWidth(20);
            columns.Add(o => o.cost).Titled("Cost").RenderValueAs(o => "$" + Convert.ToString(o.cost)).SetWidth(20);
            columns.Add(o => o.note).Titled("Note").RenderValueAs(o => o.note).SetWidth(20);
            columns.Add(o => o.acquired_date).Titled("Acq. Date").RenderValueAs(o => Convert.ToString(o.acquired_date)).SetWidth(20);
            columns.Add(o => o.disposed_date).Titled("Disp. Date").RenderValueAs(o => Convert.ToString(o.disposed_date)).SetWidth(20);
            columns.Add(o => o.verified_date).Titled("Ver. Date").RenderValueAs(o => Convert.ToString(o.verified_date)).SetWidth(20);
            columns.Add(o => o.created_date).Titled("Crtd. Date").RenderValueAs(o => Convert.ToString(o.created_date)).SetWidth(20);
            columns.Add(o => o.created_by).Titled("By").RenderValueAs(o => o.created_by).SetWidth(20);
            columns.Add(o => o.modified_date).Titled("Mod. Date").RenderValueAs(o => Convert.ToString(o.modified_date)).SetWidth(20);
            columns.Add(o => o.modified_by).Titled("By").RenderValueAs(o => o.modified_by).SetWidth(20);
        }).WithPaging(10).Sortable().Filterable().WithMultipleFilters();
    }
    catch (NullReferenceException ex)
    {
        return;
    }
</div>

这使我能够轻松地显示表记录，并具有过滤/排序和分页功能。由于我在网格中显示了大量记录，因此我添加了一些overscroll CSS：

.assetList {
    width: 100%;
    overflow-x: scroll;
    border: 1px solid black;
    margin-top: 20px;
    min-width: 800px;
    display: block;
    height: 530px;
}

.assetList table, tr, td, th {
    border: 1px solid black;
}

.assetList tr {
    width: 1%;
    white-space: nowrap;
}

我遇到的一个问题是Pager会显示在网格下方，在滚动div中。这意味着如果用户向右滚动以查看记录数据，则他们必须向左滚动才能访问Pager。

为了解决这个问题，我添加了以下.css，以便将Pager放在滚动<div>之外：

/* When GridMVC is longer than <div>, overflow with scroll */
.grid-table {
    overflow-x: scroll;
}

.grid-pager {
    position: fixed;
    margin: 25px;
    margin-bottom: 100px;
}

从视觉上讲，这不是一个完美的解决方案......

这是1920x1080分辨率全屏时网格下方的Pager：

这很完美，但是当我去第3页时有9条记录而不是10条记录：

有点关，但仍然有用。然后，如果窗口缩小（例如1218x787），则无法再找到/使用Pager：

我可以在浏览器窗口中一直向下滚动，但看不到寻呼机。

有人能发现我做错了吗？或者更有经验的人是否知道如何将Pager锁定在可滚动的下方，无论浏览器窗口的高度/大小如何？

---

修改：

这是GRIDMvc为Pager：

呈现的HTML

</tbody>
        </table>
        <div class="grid-footer">
            <div class="grid-pager">
                <ul class="pagination">
                    <li><a href="?grid-page=2">«</a></li>
                    <li><a href="?grid-page=1">1</a></li>
                    <li><a href="?grid-page=2">2</a></li>
                    <li class="active"><span>3</span></li>
                </ul>
        </div>