css 使用填充顶部时不需要的水平溢出

j9per5c4 于 2023-06-25 发布在其他

关注(0)|答案(4)|浏览(118)

下面是代码：

body {
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

.body {
  width: 100vw;
  height: 100vh;
  background-color: black;
  padding-top: 20vh;
}

.content {
  width: 50vw;
  height: 1000px;
  background-color: yellow;
}

<body>
  <div class="body">
    <div class="content">
    </div>
  </div>
</body>

问题相当简单。当我将padding-top添加到.body div时，会出现水平溢出。我想知道为什么y轴填充会影响x轴宽度。
我知道我可以使用overflow-x来摆脱它：但这是个肮脏的解决方案

css

来源：https://stackoverflow.com/questions/76541461/unwanted-horizontal-overflow-when-using-padding-top

4条答案

按热度按时间

jv2fixgn1#

只需使用百分比值：

.body {
  width: 100%; /* Percentage-based (full width of <body>) */
}

* 更多关于大众和VH*

视口单位表示当前浏览器视口的百分比（当前浏览器大小）。虽然与%单位相似，但**存在差异。*视口单位是以浏览器当前视口大小的百分比计算的。另一方面，百分比单位计算为父元素的百分比，这可能与视口大小不同。

参考：PX、EM、REM、%、VW和VH之间的区别是什么？

body {
  margin: 0;
  padding: 0;
}

div {
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box; /* Firefox, other Gecko */
  box-sizing: border-box;
}

.body {
  width: 100%; /* Percentage-based (full width of <body>) */
  height: 100vh;
  background-color: black;
  padding-top: 20vh;
}

.content {
  width: 50vw;
  height: 1000px;
  background-color: yellow;
}

<body>
  <div class="body">
    <div class="content">
    </div>
  </div>
</body>

赞(0）回复(0）举报 2023-06-25

xfyts7mz2#

这个问题的答案很简单&罪魁祸首是y轴滚动条。
让我们首先了解视口的工作原理。视口单元查看窗口而不是页面上的内容。因此，当你试图渲染一个50vw的宽度时，它实际上渲染的视区不包括滚动条的宽度。你在x轴上看到滚动条的原因就是这个原因。简单地说，在计算元素的宽度时，滚动条宽度不包括在内（y轴为1），因此存在溢出问题。
要绕过此行为，您可以使用溢出覆盖。这使得滚动条浮动在内容上（覆盖y轴滚动条）

body {
        margin: 0;
        padding: 0;
      }

      div {
        -webkit-box-sizing: border-box; 
        -moz-box-sizing: border-box; 
        box-sizing: border-box;
      }

      .body {
        width: 100vw;
        height: 100vh;
        background-color: black;

        /** the bug fix **/
        overflow: overlay; 
      }

      .content {
        width: 50vw;
        height: 1000px;
        background-color: yellow;
      }

<div class="body">
      <div class="content"></div>
    </div>

要了解溢出覆盖，请检查此article

赞(0）回复(0）举报 2023-06-25

knsnq2tg3#

如果你试图用一个标题来设置页面（正如你的评论所建议的），那么为什么不用flexbox来指导你呢？
将主体设置为柔性柱元素。在20vh处添加一个header元素，然后添加一个main元素与您的内容。

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20vh;
}

main {
  background-color: black;
  height: 1000px;
}

.content {
  width: 50vw;
  height: 100%;
  background-color: yellow;
}

<body>
  <header>Header</header>
  <main class="body">
    <section class="content"></section>
  </main>
</body>

赞(0）回复(0）举报 2023-06-25

dzjeubhm4#

为什么向.body div添加填充会导致水平溢出，这是因为CSS box-sizing属性的默认行为
你可以试试这个css

<body>
    <div class="body">
        <div class="content">
        </div>
    </div>
</body>

<style>
    body {
        margin: 0;
        padding: 0;
    }

    div {
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;
    }

    .body {
        width: 100vw;
        height: 100vh;
        background-color: black;
        padding-top: 20vh;
    }

    .content {
        width: calc(50vw - 20vh); /* Subtracting the padding value from the width */
        height: 1000px;
        background-color: yellow;
    }
</style>

赞(0）回复(0）举报 2023-06-25

我来回答

css 使用填充顶部时不需要的水平溢出

4条答案

* 更多关于大众和VH*

相关问题

热门标签

最新问答