页面的元素宽度 100%（不是浏览器窗口）

Question

编辑：为了简单起见，我将覆盖问题（请参阅下面的背景）减少到 div 的宽度。然而，通过这样做，我创造了一个不同的、有点人为的问题。接受的答案解决了我真正的问题。那里没有解决“减少”的问题。

如何使 div 的宽度等于页面宽度的 100%？ （不设置固定min-width）

看起来，解决方案是微不足道的。 <div> 的 100% 宽度本身应该没问题。除非您将浏览器窗口缩小到页面宽度以下（即出现滚动条时），否则效果很好。那么<div>元素的宽度等于窗口大小，而不是页面大小。

关于演示代码的说明：第一个 div 模拟页面宽度。下面的 div 是我尝试在所有页面上实现元素宽度的尝试。如果页面足够大（超过 500 像素），它们会按预期呈现 - 整个页面。但是如果你缩小窗口（低于 500 像素）并出现滚动条，那么 div 也会缩小，尽管我希望它们保持在 500 像素。

这是代码，如果您愿意，也可以在 jsFiddle 上查看

/* just to see sizes of the elements */
div {
  border: 1px solid red;
}

/* this simulates the width of the actual page content */
div#fixed {
  width: 500px;
}
    
div#full1 {
  width: 100%;
}

div#full2 {
  width: 100%;
  min-width: 100%;
}

div#full3 {
  position: relative;
  display: inline-block;
  width: 100%;
}

/* this works fine, but uses fixed size min-width, I cannot use */
div#fullOK {
  width: 100%;
  min-width: 500px;
}

<div id="fixed">Width fixed to 500px</div>
The DIVs below are attempts to achieving 100% width despite scrolling. All work only if the window is wider than 500px.
<div>default</div>
<div id="full1">just width 100%</div>
<div id="full2">width and min-width 100%</div>
<div id="full3">run out of ideas</div>
<br>
<br>
<div id="fullOK">fixed min-width is the only thing that works (unusable for me though)</div>

背景：我有一个页面，它有一个可以由用户调整大小的编辑器区域。它有一个模态对话框窗口支持，当被调用时，它会显示一个窗口并用高度和宽度设置为 100% 的半透明背景覆盖页面的其余部分。它运行良好，除非它在小于页面的窗口中查看。然后滚动显示没有被背景覆盖的部分页面，看起来很难看。我需要让这个背景覆盖整个页面，而不仅仅是可见区域。设置 min-width 和 min-height 只能在 JavaScript 的帮助下完成（由于未知的页面大小，因为用户可以调整画布的大小），我宁愿避免这种情况。

Answer 1

使用position: fixed 进行叠加。滚动并不重要，因为固定的元素将相对于视口定位自己。无论您做什么，height: 100% 和 width: 100% 都将覆盖整个页面。

From the MDN（强调我的）：

固定

不要为元素留出空间。相反，将其放置在相对于屏幕视口的指定位置，并且滚动时不要移动它。 [...]

CSS / HTML / 演示

* {
  margin: 0;
  padding: 0;
  font-size: 1.5em;
}
body {
  background: white;
}
.cover {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(255, 0, 0, 0.7);
}

<div class="cover"></div>
<h1>I am overlapped!</h1>
<input type="text" value="cant touch this" />