修复了具有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并根据需要调整元素的大小/偏移量：

Demo Fiddle

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>