我正在寻找一种CSS / JQuery方法，可以在滚动或内容扩展可视窗口大小时保持DIV（包含导航按钮）。
我遇到过这样的CSS代码：
.element { position:fixed; Bottom:0px }
但是我的请求是在弹出窗口/对话框中使用，而且这段代码似乎不适用于我的场景。 我有一个弹出窗口，显示下一个＆＃39;和之前的＆＃39;底部的按钮和每个＆＃34;页面＆＃34;是一个在视图中或视图外动画的字段集。 有一些场集超出了弹出窗口的高度，因此滚动激活。但是我希望在弹出窗口的底部随时保持我的按钮DIV。
尝试使用上面的CSS似乎没有在弹出窗口中设置元素，而是基于父窗口进行定位。
在弹出窗口中滚动时，有没有办法创建固定的DIV以保持可见？
非常感谢任何帮助。
编辑： 弹出窗口的代码：
<div id="win1" class="FormDiv">
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li id="liDetails" class="active firstLi">User Details</li>
<li id="liLevel">Level Selection</li>
<li id="liAccess">Access Items</li>
<li id="liSummary">Summary</li>
</ul>
<!-- fieldsets -->
<fieldset id="fsDetails">
<h2 class="fs-title" id="FormStep1Title">Enter user details</h2>
@*<h3 class="fs-subtitle">This is step 1</h3>*@
<div class="fs-leftDiv">
<input type="text" name="RequestedFor" id="RequestedFor" placeholder="Requested For " readonly title="Requested For" tabindex="-1" />
<input type="text" name="DirectorateName" id="DirectorateName" placeholder="Directorate " title="Directorate" tabindex="1" style="border-color:red;" />
<input type="text" name="Dept" id="Dept" placeholder="Department " title="Department" tabindex="3" />
<input type="text" name="ForOtherStaff" id="ForOtherStaff" placeholder="Form For Other Staff? (Enter Username) " onblur="getUserForForm()" title="Form For Other Staff? (Enter Username)" tabindex="5" />
<select id="Title" name="Title" title="User Title" onchange="onTitleChange()" tabindex="7">
<option value="">Select Title...</option>
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
</select>
<input type="hidden" name="UserName" id="UserName" /><input type="hidden" name="FormId" id="FormId" />
</div>
<div class="fs-rightDiv">
<input type="text" name="RequestDate" id="RequestDate" placeholder="Request Date " readonly title="Request Date" tabindex="-1" />
<select id="PhysicalSite" name="PhysicalSite" onchange="onSiteChange()" title="Site" tabindex="2" style="border-color:red;"></select>
<input type="text" name="PhoneNo" id="PhoneNo" placeholder="Phone Number " title="Phone Number" tabindex="4" />
<input type="text" name="Payroll" id="Payroll" placeholder="Payroll Number " title="Payroll Number" tabindex="6" />
<input type="text" name="ReplacedName" id="ReplacedName" placeholder="Replaced Name " title="Replaced Name" tabindex="8" />
<input type="hidden" name="UserEmail" id="UserEmail" /><input type="hidden" name="RequestId" id="RequestId" />
</div>
<input type="text" name="Comments" id="Comments" placeholder="Comments " title="Comments" tabindex="9" />
<div id="FixedScroll" class="fixedScroll">
<input type="button" name="save" class="save action-button" value="Save" tabindex="9" />
<input type="button" name="next" class="next action-button" value="Next" tabindex="10" />
</div>
</fieldset>
<fieldset id="fsLevel" title="hidden">
<h2 class="fs-title">Access Level / Item Selection</h2>
<h3 class="fs-subtitle">To add items using a role, please go to next section (Access Item)</h3>
<div id="AllAccessLevelDiv" style="margin-top:20px;">
<span class="GrpTitle" style="width:100%;text-align:left;">Access Level</span>
@(Html.Kendo().DropDownList()
.Name("AccessLevel")
.HtmlAttributes(new { style = "width:100%;text-align:left;margin-bottom:4px;float:left;" })
.DataTextField("Description")
.DataValueField("Code")
//.AutoBind(false)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAccessLevelList", "Home").Type(HttpVerbs.Post);
});//.ServerFiltering(false);
})
.Events(e => e.Change("AccessListRebind"))
//.Events(e => e.DataBound("DropDownDefaults"))
)
<div id="lstAccessLevelDiv" style="display:none;padding:0px;margin:0px;">
@(Html.Kendo().MultiSelect()
.Name("lstAccessLevel")
.Events(e => e.Change("onAccessLevelItemChange"))
.AutoBind(false)
.IgnoreCase(true)
.Placeholder("Click here to select item(s) ......")
.HtmlAttributes(new { style = "width:100%; float:left;display:block;" })
.DataTextField("AccessItemDesc")
.DataValueField("AccessItemCode")
.DataSource(dataSource => dataSource
.Read(read => read
.Action("GetAccessLevelItems", "Home").Type(HttpVerbs.Post)
.Data("AccessItemFilter")
)))
</div>
</div>
<div id="fsLevelDiv" style="text-align:left;width:100%;clear:both;padding:0px;margin:0px;">
</div>
<table id="AccessItemSummary1">
<thead>
<tr><th colspan="2">Summary of default / selected access items</th></tr>
<tr>
<th>Name</th>
<th>Value</th>
<th style="display:none">Id</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="FixedScroll1" class="fixedScroll">
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="save" class="save action-button" value="Save" />
<input type="button" name="next" class="next action-button" value="Next" />
</div>
</fieldset>
</fieldset>
</form>
</div>
打开弹出窗口的代码：
function OpenForm() {
var dialog, form;
dialog = $("#win1").dialog({
autoOpen: false,
height: 600,
width: 650,
modal: true,
center: true,
resizable: false,
});
dialog.center;
form = dialog.find("form").on("submit", function (event) {
event.preventDefault();
addUser();
});
var formId, requestStatus, modeColor;
var statusLabel = '';
if (pFormId) {
formId = ' Form Id: ' + pFormId;
statusLabel = '<label id="lblfooter3" class="StatusBar" style="position:relative; margin-bottom:0px; margin-left:160px; float:left; z-index:2000"><a style="color:#747A90; z-index:2000;" onclick="OpenStatusHistoryForm()">View Status History</a></label>'
}
else
formId = 'New Form';
if ((pRequestStatus == 'APPROVED') || (pRequestStatus == 'PENDING') || (pRequestStatus == 'REJECTED')) {
requestStatus = ' Read Only Mode ';
modeColor = 'indianred';
}
else {
requestStatus = ' Edit Mode ';
modeColor = 'darkgray';
}
dialog.dialog({ title: pSystemName + ' - ' + pFormTypeName });
dialog.dialog("open");
//stop main window scrolling
$('body').css('overflow', 'hidden');
$("#lblfooter").remove();
$("#lblfooter2").remove();
$("#lblfooter3").remove();
$("#win1").parent().append('<label id="lblfooter" class="StatusBar" style="position:relative;margin-bottom:0px; float:left; color:darkgray;z-index:2000">' + formId + '</label>' + statusLabel +
'<label id="lblfooter2" class="StatusBar" style="position:relative; margin-bottom:0px; float:right; color:' + modeColor + ';z-index:2000">' + requestStatus + '</label>');
}