两个带有固定 header 和页脚的可滚动内容栏

Question

我有这个代码，需要向我现有的页面添加另一个侧边菜单

https://jsfiddle.net/84j7wcqa/

<div class="wrapper">
<div class="header">
    <div class="inner">header</div>
</div>
<div class="top">
    <div class="inner">top</div>
</div>
<div class="content">
    <div class="inner">
        <div class="right">
            <div style="height:1000px;">right</div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="inner">footer</div>
</div>

html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    height: 100%;
    width: 100%;
    display: table;
}

.header, .content, .footer, .top {
    display: table-row;
}

.header, .footer {
    background: silver;
}

.inner {
    display: table-cell;
}

.content .inner {
    height: 100%;
    position: relative;
    background: pink;
}

.right {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
}

.top {
    background-color: gold;
}

看起来是这样的：

但我想要一个可以滚动的附加内容，看起来像这样

问题：这可以用table / table-row / table-cell方法解决吗？

Answer 1

在此链接中检查我的答案。 希望这可以帮助。 https://jsfiddle.net/m2vpcs1u/3/

HTML：

    <div class="wrapper">
    <div class="header">
        <div class="inner">header</div>
    </div>
    <div class="top">
        <div class="inner">top</div>
    </div>
    <div class="content">
        <div class="inner">
            <div class="right">
                <div style="height:1000px;">right</div>
            </div>
             <div class="left">
                <div style="height:1000px;">left</div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="inner">footer</div>
    </div>
</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    height: 100%;
    width: 100%;
    display: table;
}

.header, .content, .footer, .top {
    display: table-row;
}

.header, .footer {
    background: silver;
}

.inner {
    display: table-cell;
}

.content .inner {
    height: 100%;
    position: relative;
    background: pink;
}

.right {
    position: absolute;
    left: 50%;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    width:50%;
}
.left {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    overflow: auto;
    width:50%;
}


.top {
    background-color: gold;
}

Answer 2

您可以使用此代码

 html, body { height: 100%; margin: 0; }.wrapper { height: 100%; width: 100%; display: table; }.header, .content, .footer, .top { display: table-row; }.header, .footer { background: silver; }.inner { display: inline-block; float: left; width: 100%; }.inner.left { display: inline-block; width: 50%; float: left; overflow: auto; height: 900px; }.inner.right { display: inline-block; width: 50%; float: left; overflow: auto; height: 900px; }.content.inner { height: 100%; position: relative; background: pink; }.top { background-color: gold; }

 <div class="wrapper"> <div class="header"> <div class="inner">header</div> </div> <div class="top"> <div class="inner">top</div> </div> <div class="content"> <div class="inner"> <div class="left"> <div style="height:1000px;">left</div> </div> <div class="right"> <div style="height:1000px;">right</div> </div> </div> </div> <div class="footer"> <div class="inner">footer</div> </div> </div>