高度:100vh；并溢出“内容"在较小的屏幕上

问题描述

我有一个height: 100vh;，但是我有很多内容，在较小的屏幕上会溢出到另一个"vh"中，如何在较小的屏幕上处理有溢出的内容?

I have a height: 100vh; but I have a lot of content, which overflows into another "vh" on smaller screens, how do I deal w/ the overflow, on smaller screens?

推荐答案

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

If I understand correctly, you have multiple elements with height: 100vh, and the problem is that their content may overflow them.

在这种情况下，您可以

• 使用overflow属性正确处理溢出.

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

For example overflow: auto will add scrollbars only when necessary.

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

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

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

这样，如果内容较高，元素将增大以避免溢出.

This way, if the content is taller, the element will grow to avoid overflow.

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

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

这篇关于高度:100vh；并溢出“内容"在较小的屏幕上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！