为什么我的上下文菜单会在页面顶部添加空 space？

Question

我正在尝试为我的 HTML 网络应用程序创建上下文菜单。当它隐藏时，页面顶部没有空白space，但是当我激活它时，由于某种原因顶部有space。

上下文菜单已禁用：

上下文菜单已启用：

代码如下：

<style>
    #contexmenu{
        display: none;
        position: relative;
        width: 100px;
        background: rgb(238, 238, 238);}
        #contexmenu section{
            padding: 5px;}
        #contexmenu section:hover{
            background-color: rgb(219, 219, 219)}
    #mainarea{
        width: 100vw;
        height: calc(100vh - 50px);
        background: red;
    }
</style>

<article id="contexmenu">
    <section onclick="addJob()">Add Job</section>
    <section>Edit Job</section>
    <section>Refresh</section>
</article>

<article id="mainarea">

</article>

<script>

function addJob(){
    alert("");
}

document.addEventListener("contextmenu", function(event){
    event.preventDefault();
    var contexmenu = document.getElementById("contexmenu")
    contexmenu.style.display = "block";
    contexmenu.style.top = `${event.screenY - 50 - contexmenu.clientHeight}px`;
    contexmenu.style.left = `${event.screenX - 65}px`;
    console.log("New event");
})

document.addEventListener("click", function(event){
    document.getElementById("contexmenu").style.display = "none";
})
</script>

是什么导致了这个问题，我需要采取什么步骤来解决这个问题？

Answer 1

这是我的解决方案

我将 position:fixed; 添加到 #contexmenu

运行全屏模式下的以下片段

function addJob() {
  alert("");
}

document.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  var contexmenu = document.getElementById("contexmenu")
  contexmenu.style.display = "block";
  contexmenu.style.top = `${event.screenY - 50 - contexmenu.clientHeight}px`;
  contexmenu.style.left = `${event.screenX - 65}px`;
  console.log("New event");
})

document.addEventListener("click", function(event) {
  document.getElementById("contexmenu").style.display = "none";
})

#contexmenu {
  display: none;
  position: relative;
  width: 100px;
  background: rgb(238, 238, 238);
  position: fixed;
}

#contexmenu section {
  padding: 5px;
}

#contexmenu section:hover {
  background-color: rgb(219, 219, 219)
}

#mainarea {
  width: 100vw;
  height: calc(100vh - 50px);
  background: red;
}

<article id="contexmenu">
  <section onclick="addJob()">Add Job</section>
  <section>Edit Job</section>
  <section>Refresh</section>
</article>

<article id="mainarea">

</article>

为什么我的上下文菜单会在页面顶部添加空 space？

Why does my contextual menu add empty space to top of page?

javascript

css

contextmenu

web-applications