Question

我正在插入宽度为100％的叠加div，但叠加div不会完全渲染。出于某种原因，它看起来好像已经向右移动了。

这是fiddle。您可以检查右侧的填充没有完全显示。

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％（相对于窗口）时，填充将超出窗口。

如果您希望使用填充符合大小，则不应设置任何宽度属性。

但是，在你的情况下，你的字符串是一堆“A”，这将影响上面列出的属性。在这种情况下，您需要将宽度设置为比窗口宽度短40px。（因为左边和右边的填充分别是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减少40px，您可以使用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叠加右侧被切断

3 个答案: