Question

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

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

看起来，解决方案是微不足道的。宽度为100％的<div>本身应该可以。除非您将浏览器窗口缩小到页面宽度以下（即出现滚动条时），否则这样可以正常工作。然后<div>元素的宽度等于窗口大小，而不是页面大小。

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

以下是代码，如果您愿意，可以在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 / Demo

* {
  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" />

元素宽度为PAGE的100％（不是浏览器窗口）

1 个答案: