100％高度的嵌套式柔性体和元素上的滚动条（不是浏览器）

在下面的代码中，如何使article容器自动增长以消耗其下的剩余垂直空间，但滚动条仅保留该元素。

换句话说，我只想要文章的内部滚动而不是整个浏览器窗口。

有没有纯粹的CSS解决方案？ 或者我需要JavaScript来检测浏览器窗口的大小并动态调整文章的高度属性？

html, body {
  //height: 100%;    

}
#outer_container {
  display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 1 0 auto;
}
#outer2 {
  flex: 1 0 auto;
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}
#container header {
  background-color: gray;
}
#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
}
#container footer {
  background-color: gray;
}

<div id="outer_container">
  <div id="outer1">
    <h2>Outer 1</h2>
  </div>

  <section id="container">
    <header id="header">This is a header</header>
    <article id="content">
      This is the content that
      <br />With a lot of lines.
      <br />With a lot of lines.
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
    </article>
    <footer id="footer">This is a footer</footer>
  </section>


  <div id="outer2">
    <h2>Outer 2</h2>
  </div>
</div>

---

您可以尝试设置position:fixed到您的外部容器（http://jsfiddle.net/ch7n6/909/）：

#outer_container{
display:flex;
flex-direction:row;
top:0;
bottom:0;
position:fixed;
}

如果它不适用于您的设计，则可以使用window.onresize事件更改容器尺寸。

---

在你的代码中你注释掉了：

html, body {
  //height: 100%;    
}

但我认为你是在正确的轨道上。

通过取消该规则的注释并将height: 100%添加到.outer_container ，您的布局可能会完成。

尝试这个：

html, body {
  height: 100%;                   /* uncommented */
  margin: 0;                      /* removes default margin */
}
#outer_container {
  height: 100%;                   /* new; see details below */
  display: flex;
  flex-direction: row;
}
#outer2 {
  flex: 1 0 auto;
  background-color: lightblue;     /* just for demo */
}
#outer1 {                          /* correction to duplicate ID */
  flex: 1 0 auto;
  background-color: lightgreen;    /* just for demo */
}
#container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 50%;
  background-color: red;
}
#container header {
  background-color: gray;
}
#container article {
  flex: 1 1 auto;
  overflow-y: auto;
  height: 0px;
}
#container footer {
  background-color: gray;
}

<div id="outer_container">
  <div id="outer1">
    <h2>Outer 1</h2>
  </div>
  <section id="container">
    <header id="header">This is a header</header>
    <article id="content">
      This is the content that
      <br />With a lot of lines.
      <br />With a lot of lines.
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
      <br />This is the content that
      <br />With a lot of lines.
      <br />
    </article>
    <footer id="footer">This is a footer</footer>
  </section>
  <div id="outer2">
    <h2>Outer 2</h2>
  </div>
</div>

链接地址: http://www.djcxy.com/p/75653.html

上一篇: Nested flexbox with 100% height and scrollbar on element (not browser)

下一篇: Flexbox keep equal height on vertically stacked boxes