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

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;
}