仅当高度缩短时才让滚动条出现在网站上，以便文本被截断

Question

我不知道这是否可能，但我会问。我有一个有五个页面的网站。每个页面都包含在 article 标签中。这是 article 标签的 CSS：

article {
    padding-top: 10vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height: 100vh;
    text-align: center;
    box-sizing: border-box;
    position: fixed;
    padding-left: 20vw;
    padding-right: 20vw;
    top: 0;
    left: -100vw;
    transition: left 0.5s ease-in-out;
    z-index: 2;
}

我认为 HTML 或其他 CSS 中的任何一个都不相关，但如果您认为相关，我可以提供。

总之，每个页面的内容量都不同。 article 的高度为 100vh 并且设置为没有滚动条，这就是我通常希望站点的方式。每个 article 都有不同数量的 HTML 内容，因此内容下方的 space 数量也不同。

问题是，如果有人调整高度使 window 变短，那么内容可能会被截断。由于内容量不同，执行此操作所需的调整量因页面而异。

我想知道是否可以在高度允许所有内容可见时没有滚动条，但一旦高度降低导致内容被截断，滚动条就会出现。如果可能的话，我想知道是否也可以根据每个页面的内容在不同的高度发生这种情况。最后，我想知道是否可以设置它 "automatically" 以便如果您更改页面的内容，它会在滚动条出现时随之更改。

我考虑过overflow:scroll，但是当我尝试它时，即使没有截止也出现了滚动条。

我正在寻找这方面的所有建议。谢谢！

Answer 1

看来您需要使用 overflow:auto 而不是 overflow:scroll。看看吧here

仅当高度缩短时才让滚动条出现在网站上，以便文本被截断

Have scrollbar appear on website only if height shortened so text cuts off

css

height

responsive-design

responsive