Table 内 Div 内 Div

Question

我有一个小问题无法解决。我需要一个包含页眉 (OuterHeader)、页脚 (OuterFooter) 和内容的网页。在内容中，我需要另一个页眉 (InnerHeader) 和页脚 (InnerFooter) 以及一个 table，它在被 innerFooter 覆盖时可以滚动。

outerHeader 和 outerFooter 以及 innerHeader 和 InnerFooter 的大小将保持不变。这一切都需要与一个可以调整大小的页面一起工作table。

到目前为止，这是我在 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;
}

颜色可能不好，但有助于区分不同的 Divs。

如果有人有任何建议，将不胜感激。 :)

Answer 1

您可以使用以下 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 样式

Table 内 Div 内 Div

Table within Div within Div

html

css

scroll

html-table