达到最大高度时进行div滚动？

Question

项目将被添加到中心部分，我希望它根据它的内容增长，直到整个容器达到窗口大小/高度。如果它溢出我希望中心部件滚动而不是整个页面。我无法弄清楚如何去做。

CODE ：

＆＃13;

＆＃13;

.container {
  width: 100%;
  height: 100%;
  display: table;
}
.header {
  display: table-row;
}
.content {
  background-color: #FFF;
  border-radius: 5px;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  min-height: 10vh;
  max-height: 100vh;
}
.footer {
  display: table-row;
}

＆＃13;

<div class="container">
  <div class="header ">
    Header
  </div>

  <div class="content">
    Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
    <br>Content
  </div>

  <div class="footer">
    Footer
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Fiddle

编辑：以下是澄清其工作方式的图片：

Answer 1

您可以使用flexbox，

您父母display:flex以及.container和.header 中的
• .footer
• 将flex-direction:column应用于.container
• flex:1至.content（相应地增加窗口高度）

body {
  margin: 0 
}
.container {
  width: 100%;
  display: flex;
  flex-direction:column
}
.header, .footer {
 display:flex;
}
.content {
  background-color: #FFF;
  border-radius: 5px;
  padding: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  white-space: normal;
  min-height: 10vh;
  border: 1px solid red;
  flex:1  
}

<div class="container">
  <div class="header">
    Header
  </div>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique commodo nunc, at vestibulum lectus vehicula ut. Nam a orci sed dui convallis finibus sed non purus. Nullam porta, dolor eu dapibus finibus, tortor mi luctus libero, at cursus urna
    ligula et eros. In sagittis lectus in nisl viverra, eu aliquet neque porta. Nunc rutrum fringilla est quis dapibus. Integer a lobortis purus, pretium condimentum nisi. Morbi non finibus lectus, nec pretium mi. Sed pretium, metus ut tempus varius,
    eros urna congue elit, at congue magna dolor ut risus. Duis at velit quis nisl feugiat iaculis at sed orci. Nulla consectetur sem ligula, et auctor ante molestie sed. Curabitur consequat nunc velit, at rutrum tortor suscipit eget. Proin quis aliquet
    ante. Cras tempus interdum orci nec elementum. Phasellus dictum mauris eu nunc pellentesque gravida. Ut pharetra arcu a velit iaculis cursus. Nunc porta hendrerit orci ac cursus. Fusce ut feugiat libero. Etiam odio mi, tempus non lorem ac, volutpat
    cursus ligula. Aliquam semper odio ac turpis aliquam euismod sed non arcu. Pellentesque vestibulum id orci vitae euismod. Integer dignissim, risus eget aliquam finibus, dolor est fringilla lectus, vitae posuere lacus enim vitae dolor. Aenean lobortis
    gravida ante, vitae tempor dui interdum sed. Donec in neque rutrum, vestibulum tortor et, tempor ligula. Donec sit amet quam in quam pretium rhoncus ut nec justo. Maecenas rutrum aliquet turpis, in dictum est imperdiet viverra. Vivamus auctor, tellus
    sed iaculis mattis, risus ligula rhoncus velit, at varius nulla lacus non arcu. Integer sagittis neque vitae massa aliquet pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec non iaculis tellus,
    non faucibus mi. Maecenas venenatis dolor eros, in elementum ipsum bibendum et. Ut sed dui augue. Vivamus ac enim ac leo tristique convallis. Pellentesque erat massa, tempus eget hendrerit vitae, fringilla id urna. Nunc sit amet orci et tellus euismod
    pellentesque eu id ante. Phasellus quis purus sapien. Nunc molestie porttitor odio, non tempor metus dapibus quis. Donec placerat fringilla purus et ultrices. Donec consectetur facilisis urna vel porttitor. Sed id semper tellus, vitae mollis justo.
    Aliquam pharetra, lorem vel consequat posuere, diam odio sodales risus, at vehicula neque massa eu nisi. Cras viverra vitae nulla at posuere. Phasellus maximus cursus odio eget auctor. Mauris dapibus elit ut blandit euismod. Phasellus pulvinar sagittis
    fermentum. Donec libero neque, ultricies luctus ornare a, accumsan eu leo. Aenean tincidunt ullamcorper ante, id laoreet risus vehicula sit amet. Curabitur lacus ex, pulvinar quis interdum eu, tincidunt sed nunc. Aliquam tempor arcu nec ipsum vehicula
    tincidunt. Cras at risus eget tellus mollis malesuada. Fusce nec nisi ut mauris facilisis luctus sodales et tellus. Etiam eu placerat leo. Sed augue arcu, faucibus viverra mollis at, tincidunt sit amet enim. Phasellus ac lorem eget felis ornare aliquam.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Etiam enim dui, feugiat quis tortor eget, laoreet dapibus metus. Nam auctor eget justo accumsan consequat. Quisque bibendum urna quis facilisis ullamcorper.
  </div>
  <div class="footer">
    Footer
  </div>
</div>

Answer 2

尝试添加位置：固定;在＆＃39;内容＆＃39;类。看看这是否适合你。

Answer 3

你希望它滚动，所以我告诉你它是滚动但在100vh之后（在这种情况下你确实给了div"content"屏幕的整个高度）max-height如果您将max-height添加到20vh，您确实可以提供内容，您会发现它有效

Answer 4

使用此：

.dyn-height {
    width:100px;
    max-height:250px;
    overflow-y:auto;
}

参考：http://jsfiddle.net/q4CqZ/6/

您的问题的解决方案：

＆＃13;

＆＃13;

.content {
  width: 100px;
  max-height: 250px;
  overflow-y: auto;
}

＆＃13;

<div class="content">
  Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
  <br>Content
</div>

＆＃13;

＆＃13;

＆＃13;