如何在弹性框内获得可滚动的全高 div？

Question

我想创建一个可滚动的内容 div (#left)，同时保留所有其他元素 (#header、#right)。如果我给 #left 一个固定的高度，它会按预期运行，但我希望它填满整个视口并且事先不知道任何高度。

html, body{
    height:100%;
    margin:0;
    padding:0;
}

#main {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  background-color: blue;
}

#content {
  flex: 1;
  background-color: red;
}

#inner {
  display: flex;
  height: 100%;
  background-color: yellow;
}

#left {
  flex: 1;
  height: 100%;
  overflow: auto;
  background-color: pink;
}

#right {
  flex: 1;
  height: 100%;
  background-color: green;
}

<div id="main">
  <div id="header">
    Heyheyhey<br/>
    Yo<br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="left">
Only this pane should scroll.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum magna dignissim ac.
      </div>
      <div id="right">
        Yo
      </div>
    </div>
  </div>

</div>

谢谢！

Answer 1

我相信以下方法可以解决您的问题。纯CSS。 display: flex 在 display: block.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main {
  display: flex;
  height: 100%;
  flex-direction: column;
}

#header {
  background-color: blue;
}

#content {
  display: flex;
  background-color: red;
  overflow: hidden;
}

#inner {
  display: block;
  background-color: yellow;
}

#inner2 {
  display: flex;
  height: 100%;
}

#left {
  width: 50%;
  background-color: pink;
  overflow: auto;
}

#right {
  width: 50%;
  background-color: green;
}

<div id="main">
  <div id="header">
    Heyheyhey<br/> Yo
    <br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="inner2">
        <div id="left">
          Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
          Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
          suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
          lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
          ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus
          lorem. Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum
          ac tellus suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique,
          tellus lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan
          bibendum magna dignissim ac.
        </div>
        <div id="right">
          Yo
        </div>
      </div>
    </div>
  </div>
</div>

Answer 2

一直使用 flex 属性。

你不需要display: block。

你不需要calc()。

你甚至不需要百分比高度。

#main {
  display: flex;
  flex-direction: column;
  height: 100vh;  
}
#header {
  background-color: aqua;
}
#content {
  flex: 1;
  background-color: red;
  display: flex;
  min-height: 0; /* for Firefox and Edge; see note below */
}
#inner {
  display: flex;
  background-color: yellow;
}
#left {
  flex: 1;
  overflow: auto;
  background-color: pink;
}
#right {
  flex: 1;
  background-color: lightgreen;
}
body {
  margin: 0;
}

<div id="main">
  <div id="header">
    Heyheyhey<br/> Yo
    <br/>
  </div>
  <div id="content">
    <div id="inner">
      <div id="left">
        Only this pane should scroll. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a placerat lorem. Nulla consequat hendrerit diam, mollis feugiat urna. Nulla sodales auctor ex, at sollicitudin nunc scelerisque eget. Aenean ac tempus lorem.
        Aliquam consequat ullamcorper lorem sodales vehicula. Sed condimentum dolor id egestas venenatis. Phasellus convallis, odio eget sollicitudin interdum, ante elit imperdiet tellus, et scelerisque est mi quis tellus. Praesent rutrum ipsum ac tellus
        suscipit, ac consequat ligula scelerisque. Nunc finibus fringilla quam a vehicula. Aliquam egestas, leo ac ornare imperdiet, massa quam fringilla felis, eget suscipit sem nulla nec nunc. Nunc vulputate, justo pellentesque lacinia tristique, tellus
        lacus volutpat elit, nec laoreet turpis lectus vel arcu. Nam aliquet a nunc vel scelerisque. Duis at aliquam felis, et luctus quam. Quisque nec urna eget urna consectetur placerat quis non metus. Duis pellentesque egestas dolor, accumsan bibendum
        magna dignissim ac.
      </div>
      <div id="right">
        Yo
      </div>
    </div>
  </div>

</div>

注意：为了使此布局符合 flexbox 规范并在 Firefox 和 Edge 中工作，您需要覆盖 flex 项目的 min-height: auto 默认值。 Chrome 提供了一个内置的覆盖。完整的解释在这里：

如何在弹性框内获得可滚动的全高 div？

How to get a scrollable full-height div within a flex box?

html

css

overflow

flexbox