html - 由于 css3 hight vh 属性，无法向下滚动和查看文本

Question

在响应式单页网站中 - “关于我们”选项卡的文本比其他选项卡多 - 并且看不到溢出的文本。

该站点使用 css3，它使用 vh 属性来使站点具有响应性 - 它可以正常工作，但结果我无法向下滚动以查看大文本选项卡。

我添加了一个示例供您尝试:Code example (还有一个分享链接，您可以下载内容)请注意只有“关于我们”标签有“太多”的文字，其他标签有效美好的。我希望能够在“关于我们”选项卡上看到完整的文本。

html(导航栏):

<nav class="nav nav--active">
    <ul class="nav__list">
        <li class="nav__item">
            <a href="" class="nav__link"> <div class="nav__thumb color1" data-letter="a"></div>
            <p class="nav__label">
                About
            </p> </a>
        </li>
        <li class="nav__item">
            <a href="" class="nav__link"> <div class="nav__thumb color2" data-letter="p"></div>
            <p class="nav__label">
                Products
            </p> </a>
        </li>
    </ul>
</nav>

内容:

<div class="page">
    <section class="section section--active color1" data-letter="a">
        <article class="section__wrapper">
            <h1 class="section__title">About us</h1>
            <p>
                John Doe is ... long text
            </p>
        </article>
    </section>
    ...
</div>

CSS3:

.page{
    height: 100vh;
}

总结一下:css3 高度 vh 属性防止页面向下滚动以查看文本。如何解决？

Answer 1

与计量单位(vh)无关。您的文本太长而无法显示在页面中，并且您在部分标记上指定了 overflow: hidden;，因此它不允许滚动条显示所有文本。只需从“部分类”和“页面”类中删除 overflow: hidden;。因此，您的固定预处理 CSS 部分将如下所示:

.section
    will-change transform
    position absolute
    width 100%
    top 0
    left 0
    height 100vh
    align().burger__patty
          transform rotate(45deg)
        &:before
          transform rotate(-90deg) translate(-9px, 0)
        &:after
          opacity 0
          transform scaleX(0)


          text-align center
          background white
          transform translateX(100%)
          easeout(.7s)