固定的页眉和页脚具有100％可滚动的内容

Question

我正在尝试在CSS中创建一个布局，该布局中的页眉和页脚固定，内容框占据了窗口的其余部分。 内容框的高度必须至少为100％，并且仅在内容量超出允许范围时才可滚动。 我还需要在内容框中始终保留一个100％高的左框。

这是我的问题的jsFiddle ，这是到目前为止的代码

<div id="content">
    <div id="left">
        <p>Some text</p>
        <p>Some text</p>
    </div>
    <div id="right">
        <p>Some text</p>
        <p>Some text</p>
    </div>

    <div class="cleaner"></div>
</div>

<div id="footer">
</div>


html, body {
    min-height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
#header, #footer {
    position: fixed;
    height: 3em;
    width: 100%;
    background-color: green;
    z-index: 1000;    
}
#header {
    top: 0;
}
#footer {
    bottom: 0;
}
#content {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 3em 0;
}
#left {
    width: 20%;
    min-height: 100%;
    background-color: orange;
    border: thick solid black;
    float: left;
    margin-bottom: 3em;
}
#right {
    width: 70%;
    float: right;
    margin-bottom: 3em;
}
div.cleaner {
    clear: both;
}

代码的问题在于，即使不需要，内容也在滚动。 另外，如果右列中有更多文本，则左框不是100％高。

是否有一个纯CSS解决方案，还是我需要使用JavaScript？ 我已经花了几个小时试图使它工作，但是没有运气。 任何帮助，将不胜感激！

Answer 1

鉴于布局是相对固定的，相当简单，只需使用position:absolute和size / offset元素即可：

演示小提琴

的HTML

  html, body { margin: 0; height: 100%; width: 100%; } header, footer, content, aside, section { position: absolute; width: 100%; box-sizing: border-box; background: lightgrey; border: 1px solid; } header, footer, menu, section { position: absolute; width: 100%; } header, footer { height: 50px; } footer { bottom: 0; } content { top: 50px; bottom: 50px; } aside, section { top: 0; bottom: 0; } aside { width: 100px; } section { right: 0; left: 100px; width: auto; overflow-y: scroll; } 

 <header></header> <content> <aside></aside> <section></section> </content> <footer></footer>