【问题标题】:Why does the border add a scrollbar (overflow)? [duplicate]为什么边框加了滚动条(溢出)? [复制]
【发布时间】:2020-08-05 21:53:02
【问题描述】:

第一张图片有滚动条,第二张没有。

更改在 .tabulator CSS 类中,即边框规则。

为什么只是 1px 边框影响滚动,而不影响整个内容?

这是 HTML 结构...

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div class="container">
            <div class="navigation"></div>
            <div id="content-full" class="tabulator"></div>
        </div>
    </body>
</html>

【问题讨论】:

  • 您能否以文本而不是屏幕截图的形式提供您的代码?只是一个预感:* { box-sizing: border-box; } 也许?
  • 嗯,这解决了它wtf?这是怎么回事?您能否将其添加为答案,以便我接受。

标签: html css


【解决方案1】:

您可以通过将 box-sizing:border-box 样式规则应用于您的元素来解决此问题:

* {
   box-sizing: border-box;
}

默认情况下 content-box 被定义(仅内容),因此border-box 将使边框包含在盒子上下文中。

或者,您可以重新构造代码,使其具有一个包装元素,您可以在其中应用溢出,并将边框应用于子元素。

阅读Formatting Contexts(即块上下文)和box-sizing CSS rule

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-07-10
    • 2014-12-27
    • 1970-01-01
    • 2013-11-11
    • 2017-01-27
    • 1970-01-01
    相关资源
    最近更新 更多