我有一个我无法解决的小问题。我需要一个包含页眉（OuterHeader），页脚（OuterFooter）和内容的网页。在Content中，我需要另一个header（InnerHeader）和footer（InnerFooter），以及一个被innerFooter覆盖时可滚动的表。
externalHeader和outerFooter以及innerHeader和InnerFooter的大小将保持不变。所有这些都需要使用可调整大小的页面。
到目前为止，这是我在JSFiddle上拥有的：http://jsfiddle.net/hvLLbs32/
HTML：
<body>
<div name="OuterHeader" id="OuterHeader">
<p>This is the OuterHeader.</p>
</div>
<div name="Content" id="Content">
<div name="InnerHeader" id="InnerHeader">
<p>This is the InnerHeader.</p>
</div>
<div name="Wrapper" id="Wrapper">
<div name="TableDiv" id="TableDiv">
<table name="Table" id="Table">
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
</table>
</div>
</div>
<div name="InnerFooter" id="InnerFooter">
<p>This is the InnerFooter.</p>
</div>
</div>
<div name="OuterFooter" id="OuterFooter">
<p>This is the OuterFooter.</p>
</div>
</body>
的CSS
#OuterHeader {
position: fixed;
background-color: red;
top: 0px;
height : 100px;
width : 100%;
overflow: hidden;
z-index : 1;
}
#InnerHeader {
position: fixed;
background-color: yellow;
height : 100px;
width : 100%;
overflow: hidden;
}
#Content {
position: fixed;
background-color: orange;
width : 100%;
bottom:200px;
top: 100px;
bottom: 100px;
overflow: hidden;
}
#InnerFooter {
position: absolute;
background-color: green;
bottom: 0px;
height : 100px;
width : 100%;
overflow: hidden;
}
#OuterFooter {
position: fixed;
background-color: blue;
bottom : 0px;
height : 100px;
width : 100%;
}
#Wrapper{
position: absolute; /* absolute*/
top: 100px;
width: 100%;
height: 100%;
overflow-y: auto;
}
#TableDiv{
position: relative;
width: 100%;
}
#Table{
width:100%;
border-collapse:collapse;
}
#Table td{
padding:7px; border:#4e95f4 1px solid;
}
#Table tr{
background: #b8d1f3;
}
#Table tr td:nth-child(odd){
background: #b8d1f3;
}
#Table tr td:nth-child(even){
background: #dae5f4;
}
颜色可能不好，但是有助于区分不同的Div。
如果有人有任何建议，将不胜感激。 :)
最佳答案
您可以使用以下html和样式来实现所需的功能：
body, html {
padding:0;
margin:0;
height:100%;
position:relative;
}
#wrapper {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
#table {
display:table;
width:100%;
height:100%;
}
#table .row {
display:table-row;
width:100%;
height:100px;
}
#table #content {
height:100%;
}
#outer-header {
background:red
}
#inner-header {
background:yellow
}
#inner-footer {
background:green
}
#outer-footer {
background:blue
}
#TableDiv {
height:100%;
overflow-y:scroll;
}
#Table {
width:100%;
border-collapse:collapse;
}
#Table td {
padding:7px;
border:#4e95f4 1px solid;
}
#Table tr {
background: #b8d1f3;
}
#Table tr td:nth-child(odd) {
background: #b8d1f3;
}
#Table tr td:nth-child(even) {
background: #dae5f4;
}<div id="wrapper">
<div id="table">
<div id="outer-header" class="row">outer-header</div>
<div id="inner-header" class="row">inner-header</div>
<div id="content" class="row">
<div name="TableDiv" id="TableDiv">
<table name="Table" id="Table">
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>******</td>
<td>******</td>
<td>******</td>
</tr>
</table>
</div>
</div>
<div id="inner-footer" class="row">inner-footer</div>
<div id="outer-footer" class="row">outer-footer</div>
</div>
</div>Fiddle so you can see it in a high window
如果您希望在内容过长的情况下将页脚从底部移开，而不是滚动内容部分，则只需删除
#TableDiv样式