将容器拉伸到底部，但允许它扩展更多内容

Question

我正在寻找一个更好的解决方案，没有足够的内容来填补屏幕的问题。

通常，如果你想填充屏幕，你要么让HTML，主体高度100%，然后你的容器100%，或者只是使用100vh，就像我的JSFiddle下面。

问题是，如果内容最终延伸到屏幕的100%高度，它就会被切断。

我想知道是否有一种方法(也许是flexbox)，你可以有100%的高度，但如果内容超过100%，容器的大小会扩大。

html, body
{
  padding: 0;
  margin: 0;
}
.content
{
  background: grey;
  /* height: 100vh; - this works but if content goes past 100vh it gets cut off */
}

<div class="content">
  <span>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </span>
</div>

Answer 1

在content周围使用一个容器，您应用100vh和display: flex，现在content可以成为列 flexbox -参见下面的演示和更新的fiddle:

html,
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  min-height: 100vh;
  display: flex;
}
.content {
  background: grey;
  display: flex;
  flex-direction: column;
}

<div class="wrapper">
  <div class="content">
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</div>

Answer 2

您只是在.contentdiv中缺少 overflow: auto;

Your Fiddle更新

body {
  padding: 0;
  margin: 0;
  height: 100%;
}
.content {
  background: grey;
  height: 100%;
  overflow: auto;
}