CSS 调整primefaces数据表大小，实时滚动屏幕大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20559593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
To adjust primefaces datatable size,live scrolling with screen size
提问by rks
I have a datatable with live scrolling feature. The table fits fine in my development machine but the user of this app has larger screen.It would be good if the datatable fits according to the screen size. Also the height of the datatable should get adjusted with more number of rows for live scroll. Currently I have 15 rows for live scrolling. It would be good if the scroll rows increases with the height of the screen. Please help me in this regard.
我有一个带有实时滚动功能的数据表。该表格适合我的开发机器，但此应用程序的用户具有更大的屏幕。如果数据表适合屏幕尺寸，那就太好了。此外，数据表的高度应该随着实时滚动的行数进行调整。目前我有 15 行用于实时滚动。如果滚动行随着屏幕的高度增加会更好。请在这方面帮助我。
My datatable code snippet:
我的数据表代码片段：
<h:form id="form">
<div id="content">
<h:selectOneMenu id="workspaceOptions" />
<f:selectItem id="option1" itemLabel="Assignments"
itemValue="assignment" />
</h:selectOneMenu>
<p:dataTable id="workSpaceList" var="data"
value="#{workSpaceBean.lazylpId}" widgetVar="multiSelection"
selection="#{workSpaceBean.selectedRows}" resizableColumns="true"
liveScroll="true" scrollRows="15" scrollWidth="85%"
scrollHeight="69%" styleClass=".ui-datatable-hor-scroll"
tableStyle="table-layout:auto;width:100%;" scrollable="true"
filteredValue="#{workSpaceBean.filteredWorkSpaceItems}">
<p:ajax event="rowSelect" listener="#{workSpaceBean.onRowSelect}"
update=":editWrkSp:display" oncomplete="multiDialog.show()" />
<p:column selectionMode="multiple" style="width:5%" />
.
.
.
<p:column headerText="Insured" filterBy="#{data.insuredName}"
sortBy="#{data.insuredName}" style="width:20%">
<h:outputText value="#{data.insuredName}" />
<!-- style="width:250px" -->
</p:column>
<p:column headerText="City" filterBy="#{data.custAddress_City}"
sortBy="#{data.custAddress_City}">
<h:outputText value="#{data.custAddress_City}" />
</p:column>
</p:dataTable>
</div>
</form>
CSS of the entire page
整个页面的CSS
body {
margin: 0px 0px 0px 0px;
font-family: tahoma;
font-size: 11px;
background-color: #E8F0F8;
height: 100%;
max-height: 100%;
overflow: hidden;
}
#header {
width: 100%;
height: 90px;
background-color: #194775;
position: fixed;
}
#sidepanel {
width: 180px;
height: 100%;
background-color: #D9E6F3;
margin-top: 90px;
position: fixed;
float: left;
border-right-style: solid;
border-width: 0.5px;
border-color: #4A7EBB;
/* z-index:1; */
}
#logo {
float: left;
position: absolute;
left: 5px;
}
#title {
position: absolute;
float: right;
/* padding-right: 10px;
padding-bottom:90px; */
right: 30px;
top: -25px;
/* bottom:10px; */
}
.title1 {
font-family: Agency FB;
font-size: 32px;
color: #7F7F7F;
font-style: bold;
/* float: right; */
text-align: left;
/* padding-right: 10px; */
font-weight: bold;
/* padding-bottom:20px; */
}
.accordionMenu .ui-accordion-header a {
background: #194775;
color: white;
}
.accordionMenu .ui-accordion-content {
/* color:#254061!important */
text-decoration: none;
background-color: #B9CDE5;
font-weight: bold;
padding: 5px 5px;
}
#content {
position: fixed;
margin: 90px 0 0 180px;
width: 100%;
height: 100%;
background-color: #E8F0F8;
}
.label {
display: block;
font-weight: bold;
color: #FFFFFF;
background-color: #194775;
width: 170px;
/* text-align:left; */
padding: 4px 4px 4px 6px;
text-decoration: none;
margin-top: 1px;
}
.selectMenu {
/* float:right; */
margin-left: 20px;
margin-top: 15px;
}
.ui-datatable-hor-scroll .ui-datatable-tablewrapper,.scrolling-div .ui-datatable-tablewrapper
{
overflow: auto;
width: 100%;
height: 100% padding-bottom: 5px;
}
.datatable {
padding-left: 15px;
padding-right: 15px;
}
.calendarStyle {
width: 250px;
}
.ui-corner-top {
display: none;
}
.ui-chkbox-box ui-widget ui-corner-all ui-state-default {
/* vertical-align:middle; */
display: none;
}
采纳答案by Kukeltje
In at least PrimeFaces 5.1, you candefine the scrollHeight (and width) as a percentage of the container.
至少在 PrimeFaces 5.1 中，您可以将 scrollHeight（和宽度）定义为容器的百分比。
From the docs (emphasis mine):
从文档（强调我的）：
Scrolling has 3 modes; x, y and x-y scrolling that are defined by scrollHeight and scrollWidth. These two scroll attributes can be defined using integer values indicating fixed pixels or percentagesrelative to the container dimensions.
滚动有 3 种模式；由 scrollHeight 和 scrollWidth 定义的 x、y 和 xy 滚动。这两个滚动属性可以使用整数值来定义，这些整数值指示相对于容器尺寸的固定像素或百分比。
See also (5.3 docs and source):
另请参阅（5.3 文档和来源）：
