Question

在响应式一页网站中 - “关于我们”标签的文字多于其他标签 - 并且看不到溢出的文字。

该网站使用css3，它使用vh属性，使网站响应 - 它可以工作，但因此我无法向下滚动查看大文本标签。

我添加了一个示例供您尝试：Code example（还有一个可以下载内容的共享链接）请注意，只有“关于我们”标签有“太多”文字，其他选项卡有效精细。我希望能够在“关于我们”标签上看到整篇文章。

html（navbar）：

<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 height vh属性可防止页面向下滚动以查看文本。如何解决？

Answer 1

它与测量单位（vh）无关。您的文字太长，无法放入页面，并且您在部分标记上指定了overflow: hidden;，因此不允许滚动条查看所有文本。只需从“section class”以及“page”类中删除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)

由于css3 hight vh属性

1 个答案: