css overlay right side is cut off

Question

I am inserting an overlay div with width 100%, but the overlay div is not rendered completely. For some reason, it looks as if it has moved rightward.

Here is fiddle. You can check that the padding on the right side does not show fully.

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

Paddings are not calculated in the width in HTML.

That's why when you set the width to 100% (relative to the window), the padding will go outside the window.

If you wish to fit the size, with the padding, you should not set any width property.

But, in your case, your string is a bunch of "A"s, which will affect the property listed above. In this case, you would need to set the width to 40px shorter than the window width. (Because the padding on the left and right are 20px respectively, 20 + 20 = 40)

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

Apart from that, if you want the "A"s to move to the next line, use this css property:

word-wrap: break-word;

Otherwise, use one of the following two css properties:

overflow: hidden;
white-space: nowrap;