Fixed DIV when scrolling in a pop up window - css

Question

I'm looking for a CSS/JQuery method of keeping a DIV (which contains navigation buttons) visible when scrolling or content extends the viewable window size.
I have come across CSS code like this:
.element { position:fixed; Bottom:0px }
But my request is for use within a pop up window / dialog and this code doesn't seem to work for my scenario.
I have a pop up window which displays a 'next' and 'previous' button at the bottom and each "page" is a fieldset which is animated in or out of view.
There are a few fieldsets which go beyond the height of the pop up window and so the scroll activates. But I want to keep my button DIV in view at all times, along the bottom of the pop up window.
Trying to use the CSS above does not seem to set the element within the pop up window, rather it is positioning based on the parent window.
Is there a way to create a fixed DIV to remain visible when scrolling within a pop up window?
Any help would be greatly appreciated.
EDIT:
Code for the pop up window:
<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>
The code for opening the pop up:
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>');
}