HTML5使空div完整视口大小[重复]答案

【问题标题】：HTML5 make empty div full viewport size [duplicate]HTML5使空div完整视口大小[重复]
【发布时间】：2022-02-10 20:34:15
【问题描述】：

我正在尝试创建一个占用 100% 视口并随视口移动（或位置：固定）的 EMPTY div。它还需要位于顶部：0，视口的左侧 0。这是一个浏览器扩展，所以我需要在任何页面上添加这个 div。

这样做的背景原因是，我可以将 div 用作显示鼠标 x 和 y 位置的整页工具提示，并且工具提示跟随鼠标。

这个整页div怎么实现呢？我的许多尝试都未能创建具有任何高度的 div。

我的电脑不在身边，但我很快就可以添加我已经尝试过的内容。

【问题讨论】：

抱歉，它不适用于空 div（无子内容）。我的 div 完全没有内容
该问题答案中的大多数示例都有空 div。
“空 div”是指<div></div> 还是<div />？
jsfiddle.net/L5q0tmca/2 - 它确实有效，或者使用 100vh 的其他 20 种方法之一也可以。我的猜测是，如果 HTML 和 body 元素不起作用，您会忘记为 HTML 和 body 元素添加宽度和高度。
@Graham Ritchie 我已将 100% 添加到 document.body.height ，虽然我不确定如何通过 JavaScript 引用 html ......是document.height吗？

标签： javascript html css dom divider

【解决方案1】：

试试这个

{
position:absolute;
inset:0;
width:100vw;
height:100vh;
}

【讨论】：

【解决方案2】：

首先添加一个空的 div 到 body 然后使用这个：

{position: fixed;
top: 0;
left: 0;
background: red;
right: 0;
z-index: 999999999;
bottom: 0;}

这个纯 css 代码就足够了，即使调整大小后你也不需要任何 javascript。

【讨论】：

【解决方案3】：

.empty-div {
  position: fixed;
  inset: 0;
}

inset 属性是 top、right、bottom 和 left 的简写，它将 div 拉伸到各个角落。

为了将 div 放在最顶部，而不是其他所有内容，最好在页面的最后插入 div；就在结束 </body> 标记之前。
为了保险起见，您也可以添加z-index: 9999999。

【讨论】：

【解决方案4】：

试试这个样式表，加上一些 JavaScript 代码将帮助你实现一个完整的页面 div。

#full-page-div {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: none
}

我添加了额外的“溢出：无”，因为高度可能会超过浏览器窗口的高度，我们不需要显示滚动条。

现在，在 JavaScript 代码中，我们需要将 div 高度调整为整页高度，还需要为窗口“resize”事件添加一个处理程序，以调整整页 div 的高度和宽度。

function ExtFullPageDivAdjust()
{
  let fullPageDiv = document.getElementById("full-page-div");
  fullPageDiv.style.height = Math.max(window.innerHeight, document.querySelector("body").clientHeight) + "px";
  fullPageDiv.style.width = window.innerWidth + "px";
}

ExtFullPageDivAdjust();
window.addEventListener("load", ExtFullPageDivAdjust);
window.addEventListener("resize", ExtFullPageDivAdjust);

【讨论】：

【解决方案5】：

试试这个

{
  position: fixed;
  height: 100vh;
  width: 100vw;
}

【讨论】：

我已经尝试过了，但是它将 div 定位在页面内容之后，并且在添加 top: 0 之后它将自身设置为 0 宽度……。还有其他想法吗？当我在我的电脑上时，我会再试一次