如果内容超出max-height，则使div变为可滚动

Question

我已将article元素设置为max-height 90%，但如果内部内容超出此值，则会继续流过footer #libraries }。

如果footer内容满了，我是否有办法让html变得可滚动？所以内容并不超出我的<div id="libraryView"> <article id="libraries">Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/>Test <br/> </article> <footer> <button id="libraryAdd">Add</button> <button id="libraryBack">Back</button> </footer> </div> 。

http://jsfiddle.net/bobbyrne01/oyrvbh23/1/

css

html, body {
    height: 98%;
}
#libraries {
    background-color: #E6E6E6;
    max-height: 90%;
}
#libraryView {
    background-color: #A6A6A6;
    height: 100%;
}

{{1}}

{{1}}

Answer 1

在容器上使用OVERFLOW这样的overflow:auto属性：

html,
body {
  height: 98%;
}
#libraries {
  background-color: #E6E6E6;
  max-height: 90%;
  overflow: auto;
}
#libraryView {
  background-color: #A6A6A6;
  height: 100%;
}

<div id="libraryView">
  <article id="libraries">Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>
  </article>
  <footer>
    <button id="libraryAdd">Add</button>
    <button id="libraryBack">Back</button>
  </footer>
</div>

http://jsfiddle.net/oyrvbh23/2/

Answer 2

一种解决方案是将overflow: auto;用于ID为#libraries的元素：

html,
body {
  height: 98%;
}
#libraries {
  background-color: #E6E6E6;
  max-height: 90%;
  overflow: auto;
}
#libraryView {
  background-color: #A6A6A6;
  height: 100%;
}

<div id="libraryView">
  <article id="libraries">Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>Test
    <br/>
  </article>
  <footer>
    <button id="libraryAdd">Add</button>
    <button id="libraryBack">Back</button>
  </footer>
</div>