css 叠加右侧被截掉

Question

我正在插入宽度为 100% 的叠加层 div，但叠加层 div 未完全呈现。由于某种原因，它看起来好像向右移动了。

这里是fiddle。可以查看右侧padding是否显示不全

html

<div class='overlay'>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

css

.overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000000;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-transition: opacity .2s linear;
  transition: opacity .2s linear;
  padding: 20px;
}

Answer 1

HTML 中的宽度未计算填充。

这就是为什么当您将宽度设置为 100%（相对于 window）时，填充将超出 window。

如果你想适应大小，有填充，你不应该设置任何宽度属性。

但是，在你的情况下，你的字符串是一堆"A"，这将影响上面列出的属性。在这种情况下，您需要将宽度设置为比 window 宽度短 40px。（因为左右padding分别是20px，所以20 + 20 = 40）

document.getElementsByTagName("div")[0].style.width = window.innerWidth - 40 + "px";

除此之外，如果您希望 "A" 移动到下一行，请使用此 css 属性:

word-wrap: break-word;

否则，使用以下两个 css 属性之一：

overflow: hidden;
white-space: nowrap;

Answer 2

因为您正在使用 padding: 20px，所以您需要将 width 和 height 缩小 40 像素，您可以使用 calc(100% - 40px) 来做到这一点。

你还需要添加 word-wrap: break-word 来打破 div 中的长单词。

.overlay {
    position: fixed;
    left: 0;
    top: 0;

    width: calc(100%-40px);
    height: calc(100%-40px);

    z-index: 1000000;
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-transition: opacity .2s linear;
    transition: opacity .2s linear;

    padding: 20px;
    word-wrap: break-word;
}

Answer 3

用下面的代码替换你的 CSS 填充，

.overlay {
padding : 20px 0px;
}

css 叠加右侧被截掉

css overlay right side is cut off

css

overlay

padding