如何使弹出 window 页脚不可滚动

Question

我的项目中有一个 Kendo Window，我在其中填充了一些字段。尽管页眉按我的意愿行事，但滚动条会溢出到页脚。我希望 window 内容可滚动，但页眉和页脚除外，如下图所示（页脚显示为粘性）。我该怎么做？

查看：

@(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");    
  }

然后在 window 打开并调整大小时调用此函数：

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

工作DEMO

注意，DEMO中没有使用MVC，但基本方法应该是一样的...

如何使弹出 window 页脚不可滚动

How to make popup window footer unscrollable

html

css

asp.net-mvc

kendo-ui

kendo-asp.net-mvc

工作DEMO