Scrollable Primefaces Datatable Body with fixed paginator bottom - primefaces

Question

I have primefaces datatable. The paginator is fixed to the bottom of the window. To achieve this I have manipulated the original css selector which you can see below. I would like to achieve that only the table rows are scrolling. The table header and the paginator should stay as they are.
Datatable View
<p:dataTable
id="dtaInternationalization"
binding="#{internationalizationController.dtaHdrLang}"
value="#{internationalizationController.itemsHdrLang}"
var="item"
widgetVar="widInternationalization"
style="margin-bottom:20px"
selectionMode="multiple"
liveScroll="true"
scrollable="true"
scrollHeight="665"
selection="#{internationalizationController.selectedItemsHdrLang}"
filteredValue="#{internationalizationController.filteredItemsHdrLang}"
sortMode="multiple"
paginator="true"
paginatorPosition="bottom"
paginatorAlwaysVisible="true"
rows="25"
paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
currentPageReportTemplate="{totalRecords} record(s)"
rowsPerPageTemplate="25,50,75"
rowKey="#{item.pk}"
resizableColumns="true"
liveResize="true"
draggableColumns="true">
<!-- DATATABLE HEADER SECTION -->
<f:facet name="header">
<p:toolbar styleClass="fw-panel-title-header">
<p:toolbarGroup styleClass="fw-toolbar-group-left">
<p:outputLabel id="lblPageTitle"
value="Edit Datatable Settings" styleClass="fw-title-bar" />
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right">
<p:outputLabel value="Global Search: "
styleClass="fw-global-search" />
<p:inputText id="globalFilter"
onkeyup="PF('widTableView').filter()" style="width:250px"
placeholder="Enter Keyword" />
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right">
<p:commandButton id="cbProperties" icon="fa fa-gear" title="View Settings" />
<p:commandButton id="refreshButton" value="Refresh"
icon="fa fa-refresh"
actionListener="#{internationalizationController.refresh}"
update="dtaInternationalization" />
<p:commandButton id="addButton" value="Add" icon="fa fa-plus"
actionListener="#{internationalizationController.addLanguage}"
oncomplete="PF('widAddLanguage').show()" />
<p:commandButton id="deleteButton" value="Delete"
icon="fa fa-remove"
disabled="#{empty internationalizationController.selectedItemsHdrLang}" />
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right">
<p:ajaxStatus
style="width:20px;height:20px;position:relative;margin-right:15px;">
<f:facet name="start">
<i class="fa fa-circle-o-notch fa-spin ajax-loader"
aria-hidden="true"></i>
</f:facet>
<f:facet name="complete">
<h:outputText value="" />
</f:facet>
</p:ajaxStatus>
</p:toolbarGroup>
<p:toolbarGroup styleClass="fw-toolbar-group-right"
style="margin-right:15px">
<p:messages id="msgs" showDetail="true" closable="false" styleClass="fw-messages-title-bar" showSummary="false" showIcon="false" />
</p:toolbarGroup>
</p:toolbar>
</f:facet>
<!-- DATATABLE COLUMN SECTION -->
<p:column headerText="Image" styleClass="center" width="50">
<o:graphicImage value="#{item.flagImageSmall}" dataURI="true"
rendered="#{!empty item.flagImageSmall}" />
</p:column>
<p:column headerText="Default" styleClass="center"
filterBy="#{item.languageDefault}" filterMatchMode="equals"
sortBy="#{item.languageDefault}" width="110">
<f:facet name="filter">
<p:selectOneButton
onchange="PF('widInternationalization').filter()"
styleClass="custom-filter">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="True" itemValue="true" />
<f:selectItem itemLabel="False" itemValue="false" />
</p:selectOneButton>
</f:facet>
<p:outputLabel rendered="#{item.languageDefault}">
<i class="fa fa-check" />
</p:outputLabel>
</p:column>
<p:column headerText="Active" styleClass="center"
filterBy="#{item.activeFlag}" filterMatchMode="equals"
sortBy="#{item.activeFlag}" width="110">
<f:facet name="filter">
<p:selectOneButton
onchange="PF('widInternationalization').filter()"
styleClass="custom-filter">
<f:converter converterId="javax.faces.Boolean" />
<f:selectItem itemLabel="All" itemValue="" />
<f:selectItem itemLabel="True" itemValue="true" />
<f:selectItem itemLabel="False" itemValue="false" />
</p:selectOneButton>
</f:facet>
<p:outputLabel rendered="#{item.activeFlag}">
<i class="fa fa-check" />
</p:outputLabel>
</p:column>
<p:column headerText="Code" styleClass="center" width="90"
filterBy="#{item.languageCode}" filterMatchMode="contains"
sortBy="#{item.languageCode}">
<h:outputText value="#{item.languageCode}" />
</p:column>
<p:column headerText="Language" filterBy="#{item.languageName}"
filterMatchMode="contains" sortBy="#{item.languageName}">
<h:outputText value="#{item.languageName}" />
</p:column>
<p:column headerText="Created" filterBy="#{item.createDate}"
filterMatchMode="contains" sortBy="#{item.createDate}" width="6%">
<h:outputText value="#{item.createDate}">
<f:convertDateTime
locale="#{parameterSessionController.localeCode}" type="localDateTime"
dateStyle="medium" timeStyle="medium" />
</h:outputText>
</p:column>
<p:column headerText="Created by" filterBy="#{item.createUser}"
filterMatchMode="contains" sortBy="#{item.createUser}" width="6%">
<h:outputText value="#{item.createUser}" />
</p:column>
<p:column headerText="Modified" filterBy="#{item.modifyDate}"
filterMatchMode="contains" sortBy="#{item.modifyDate}" width="6%">
<h:outputText value="#{item.modifyDate}">
<f:convertDateTime
locale="#{parameterSessionController.localeCode}" type="localDateTime"
dateStyle="medium" timeStyle="medium" />
</h:outputText>
</p:column>
<p:column headerText="Modfied by" filterBy="#{item.modifyUser}"
filterMatchMode="contains" sortBy="#{item.modifyUser}" width="6%">
<h:outputText value="#{item.modifyUser}" />
</p:column>
<p:ajax event="rowDblselect"
listener="#{internationalizationController.editLanguage}"
oncomplete="PF('widLanguage').show()" />
<p:ajax event="rowSelect" update="deleteButton" />
<p:ajax event="rowUnselect" update="deleteButton" />
</p:dataTable>
The paginator css selectorI have manipulated as follow:
body .ui-datatable .ui-paginator {
padding: 6px 12px;
border-style: none;
border-top: solid 2px #9fd037;
position: fixed;
bottom: 0px;
width: -webkit-fill-available;
z-index: 1;
}
Many Thanks in Advance