Question

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

通常情况下，如果你想要填充屏幕，你可以将HTML，身体高度100％，然后你的容器100％，或者只使用100vh，如下面的JSFiddle。

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

我想知道是否有一种方法（可能使用flexbox），你可以有100％的高度，但如果内容超过100％，容器会扩大尺寸。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您错过了overflow: auto; div

中的 .content

Your Fiddle updated

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

.content {
  background: grey;
  height: 100%;
  overflow: auto;
}

Answer 2

使用您应用content和100vh的{{1}}周围的容器，现在display: flex可以成为列 {{ 1}} - 请参阅下面的演示和updated fiddle：

content

flexbox

将容器拉伸至底部，但如果内容更多

2 个答案: