Question

我有一个height: 100vh;，但我有很多内容，这些内容溢出到另一个＆＃34; vh＆＃34;在较小的屏幕上，如何在较小的屏幕上处理溢出？

Answer 1

如果我理解正确，您有height: 100vh个多个元素，问题是他们的内容可能会溢出。

在这种情况下，您可以

使用overflow属性正确处理溢出。

例如，overflow: auto仅在必要时添加滚动条。

＆＃13;

html,body {
  margin: 0;
}
section {
  height: 100vh;
  overflow: auto;
  background: yellow;
}
section + section {
  background: lime;
}
div {
  height: 150vh;
  margin-left: 15px;
  border-left: 1px dotted;
}

＆＃13;

<section>
  Start<div></div>End
</section>
<section>
  Start<br />End
</section>

＆＃13;

使用min-height: 100vh代替height: 100vh

这样，如果内容更高，元素将增长以避免溢出。

＆＃13;

html,body {
  margin: 0;
}
section {
  min-height: 100vh;
  background: yellow;
}
section + section {
  background: lime;
}
div {
  height: 150vh;
  margin-left: 15px;
  border-left: 1px dotted;
}

＆＃13;

<section>
  Start<div></div>End
</section>
<section>
  Start.<br />End
</section>

＆＃13;

Answer 2

请以容器的样式尝试overflow: auto;。

Sample code

身高：100vh;溢出＆＃34;内容＆＃34;在较小的屏幕上

2 个答案: