Question

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

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

有纯css解决方案吗？或者我是否需要javascript来检测浏览器窗口的大小并动态调整文章的高度属性？

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

http://jsfiddle.net/ch7n6/907/

最初是基于这个问题的答案：
Flexbox and vertical scroll in a full-height app using NEWER flexbox api

Answer 1

您可以尝试将let url = URL(fileURLWithPath: path) let audioPlayerItem = AVPlayerItem(url: url) currentAudioItemOne = audioPlayerItem currentQueuePlayer = AVQueuePlayer() currentAudioPlayerLayer = AVPlayerLayer(player: currentQueuePlayer) currentAudioLooper = AVPlayerLooper(player: currentQueuePlayer, templateItem: currentAudioItemOne) currentQueuePlayer.play()设置为外部容器（http://jsfiddle.net/ch7n6/909/）：

Num Tracks:     1
----
Data format:     2 ch,  44100 Hz, 'lpcm' (0x0000000C) 16-bit little-endian signed integer
                no channel layout.
estimated duration: 11.302336 sec
audio bytes: 1993732
audio packets: 498433
bit rate: 1411200 bits per second
packet size upper bound: 4
maximum packet size: 4
audio data file offset: 44
not optimized
source bit depth: I16
----

如果它不适用于您的设计，您可以使用position:fixed事件更改容器尺寸。

Answer 2

在您的代码中，您注释掉了：

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

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

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

试试这个：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

jsFiddle

要了解此解决方案的工作原理以及可能阻碍您的工作，请查看以下帖子：

我需要内部元素上的滚动条，而不是浏览器窗口（视口）

2 个答案:

jsFiddle