Question

我使用flexbox并将每个部分的高度设置为100vh。

每当我调整窗口大小时，第一部分和最后一部分的文本溢出到其他部分。

.banner, #showcase  {
  display: flex;
  align-items: center;
  justify-content: center;
}

.container, .banner {
    width: 100%;
    height: 100vh;
}

http://codepen.io/mrfishball/pen/oLgLxX

Answer 1

您是否在内容重叠的部分尝试了overflow:hidden;？

Answer 2

.banner, #showcase  {
    display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
    /**border: 10px blue solid;**/
overflow: hidden; /*or scroll*/
}

您可以控制不同设备屏幕尺寸的字体大小。例如：

@media only screen and (max-width: 500px) {
    .banner {
        font-size: 9px;
    }
}

Answer 3

您只需将width : 100%添加到.content

即可

Answer 4

在过去的几天里，我一直在努力解决同样的问题，经过几个小时的Google试用和试错，我为你的一个问题提出了一个很好的解决方法。我仍然在努力解决这个问题，所以我不打算接触，但是弄清楚如何实现流体排版真的帮助我解决了溢出问题。

我不打算详细解释这一切，因为我在下面链接的资源做了更彻底的工作，而且可能有我不知道/误解的信息。

TL;它的DR是，而不是一堆媒体查询，您希望文本流畅地缩放到您的视口大小。以下是基本步骤，但首先是免责声明：

如果可能，请在您网站的沙盒版本上进行测试。您可能需要一段时间才能达到理想的排版缩放比例如果每一个都会对您的客户体验产生负面影响分钟文字大小改变。

将基本字体大小设置为100％（在正文或html中，具体取决于您的网站设置方式）

html {font-size:100%;}

以rem（非em）大小设置您的排版层次结构（rem基本字体大小，使数学更简单）。例如：

p { font-size: 1.25rem; }

h1 { font-size: 4rem; }

h2 { font-size: 3.25rem; }

h3 { font-size: 3.0rem; }

h4 { font-size: 2.75rem; }

h5 { font-size: 2.25rem; }

h6 { font-size: 1.75rem; }

添加以下两个媒体查询以启用文本的响应行为，并将大小设置为高于特定阈值：

@media only screen and (min-width: 10em) {

html {

    font-size: calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 1 */

    font-size: -webkit-calc(87.5% + 0.25 * (100vw - 8000%) / 40); /* 2 */

    font-size: -ms-calc(0.875em + 0.25 * (100vw - 80em) / 40); /* 3 */

}

}

@media only screen and (min-width: 120em) {

html { font-size: 1.125em; }

}

而且瞧！你应该有流畅的排版！你必须仔细检查你的网站并确保没有超越你的css的事情（在我最终点击之前，引导程序将我搞砸了几个小时，感谢谷歌开发人员的侧边栏），并且你没有流氓font-size声明弄乱了你漂亮的布局。如果您的网站干净整洁，排版很好，那么您应该只使用<p>，<h1>等标记，这些标记都会完全响应。

以下是我发现的一些资源，非常有助于解决这个问题：

https://zellwk.com/blog/viewport-based-typography/ https://www.smashingmagazine.com/2016/05/fluid-typography/

Answer 5

您设置此.container, .banner { width: 100%; height: 100%; /**border: 10px black solid;**/ }以及导致问题的原因。将其设置为100％。

height: 100%;

我看到其他答案包括为子元素添加更多视口高度，但我认为这会要求更多麻烦。另外，它并没有完全解决重叠问题。我通常会避免vh或vw，除非有必要实现一些无法用它们完成的事情;例如，具有增强的进入和离开动画的视差滚动或侧面导航。

要实现明确切割，防弹部分没有任何重叠，请使用CREATE FUNCTION dbo.SplitStrings_Numbers ( @List NVARCHAR(MAX), @Delimiter NVARCHAR(255) ) RETURNS TABLE WITH SCHEMABINDING AS RETURN ( SELECT Item = SUBSTRING(@List, Number, CHARINDEX(@Delimiter, @List + @Delimiter, Number) - Number) FROM dbo.Numbers WHERE Number <= CONVERT(INT, LEN(@List)) AND SUBSTRING(@Delimiter + @List, Number, LEN(@Delimiter)) = @Delimiter ); GO

更新：我无法评论，因为我没有足够的积分，所以我在这里添加。为了回应这个评论＆＃34; @StevenKwok，我更新了答案。您可以搜索有关响应速度和屏幕尺寸的更多信息，这支持了我的观点，要求更多麻烦。如果你坚持使用vh，那么你需要在某些断点处添加媒体查询，包括小型笔记本电脑，平板电脑和移动设备。

内容在较小的屏幕上溢出/重叠弹性项目

5 个答案: