html - 固定页眉和页脚具有 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>