如何使弹出窗口页脚不可滚动

Question

我的项目中有一个Kendo Window，我在其中填充了一些字段。尽管标题符合我的要求，但滚动条会溢出到页脚。我希望窗口内容是可滚动的，除了Header和Footer，如下图所示（页脚可见粘性）。我该怎么做？

查看：

@(Html.Kendo().Window()
    .Name("winCreate")
    .Title("New")
    .Visible(false)
    .Draggable(true)
    .Content("Loading...")
    .LoadContentFrom("Create", "Issue")
    .Modal(true) 
    .Actions(actions => actions
        .Close()
     )      
)



@using (Html.BeginForm("Create", "Issue", FormMethod.Post}))
{
    @Html.AntiForgeryToken()

<div class="container">

    @Html.LabelFor(m => m.ProjectID)
    @Html.TextBoxFor(m => m.ProjectID, new { maxlength = 75, @class = "k-textbox" })
    <br />

    ... //The other staff here

    <div class="modal-footer">
        @(Html.Kendo().Button()
        .Name("btnCancel")
        .HtmlAttributes(new { type = "button", @class = "k-button" })
        .Content("Cancel")
        .Events(ev => ev.Click("closeWindow"))
        )

        @(Html.Kendo().Button()
        .Name("btnSubmit")
        .HtmlAttributes(new { type = "submit", @class = "k-primary k-button"            })
        .Content("Save")
    )
    </div>

</div>
}

Answer 1

创建一个用于调整内容div大小的函数：

  function ResizeDialog(){
    var h = $("#dialog").height();
    var headH = $("#dialog .modal-header").outerHeight(true);
    var footH = $("#dialog .modal-footer").outerHeight(true);
    var contH = h - headH - footH ;

    $("#dialog .container").height(contH).css("overflow", "auto");    
  }

然后在打开的窗口调用此函数并调整大小：

$("#dialog").kendoWindow({
  title: "New",
  draggable: true,
  modal: true,
  height: "80%",
  resize: function() {
    ResizeDialog();
  },
  open: function() {
    ResizeDialog();
  }
});

正在工作 DEMO

注意，DEMO不使用MVC，但基本方法应该是相同的......