Question

如何让一个高度100％填充视口的div和覆盖整个页面的第二个div（绝对定位）（下拉列表）？

更多信息：我的主页上有一个包含英雄形象的div。 div需要填充视口。英雄div下面是更多的内容。我有以下代码：

html { height: 100%; }
body { height: 100%; }
.hero { height: 100%; }

我希望使用height:100%而不是height:100vh，因为在平板电脑和手机（在Chrome中）时，视口高度会在滚动时发生变化，而在iOS Safari中，英雄div的底部隐藏在应用控件后面（书签等）使用100vh。

以上工作对于英雄形象div来说很好。但我有一个下拉菜单/导航栏。下拉列表需要具有整个页面的高度，而不仅仅是视口。菜单有绝对的位置。如果我将高度设置为100％，它只覆盖视口高度，而不是整个页面。如果我设置top:0;和bottom:0;。

，情况也是如此

我该怎么做？谢谢

第一张图片显示蓝色的英雄div，屏幕高度（减去标题）。＆＃39; fold＆＃39;下面有更多内容。

第二张图片显示下拉菜单，该菜单应覆盖整个页面高度。因此，白色下拉的高度将远远超过英雄div。

Answer 1

内部元素的高度100％表示它将占据其容器。如果您想占用整个页面，则必须使用top:0，left:0，并在JavaScript中使用innerElement.style.height=document.body.style.height;

Answer 2

以前的代码段可能无效您应该使用clientHeight

innerElement.style.height=document.body.clientHeight

Answer 3

您可以改为使用'vh'和'vw'：

100vh - 100虚拟高度％
100vw - 100 virtua width％

Answer 4

您可以使用：

＆＃13;

function openMenu(){
   document.getElementById("ddl").style.display = "block";
}

function closeMenu(){
   document.getElementById("ddl").style.display = "none";
}

＆＃13;

body{ 
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
  position: relative;
  width: 300px; /*for test */
}

.menu{height: 50px;} /* first child of body */
.hero{
  flex: 1; 
  background-color:#4de6d0;
  min-height: calc(100vh - 50px);   /*for test */
  }  /* second child of body */
.dropDown {
   position: absolute;
   min-height: calc(100% - 50px);
   top: 0;
   background-color:white;
   display: none;
   width: 80%;
   }
   .dropDown > div{
      height: 60px;
      text-align: center;
      line-height: 60px;
      }

＆＃13;

<body>
   <div class="menu" onclick="openMenu()">Menu</div>
   <div class="hero"></div>
   <div class="dropDown" id="ddl">
      <div onclick="closeMenu()">Close</div>
      <div>Work</div>
      <div>About</div>
      <div>Services</div>
      <div>Ethics</div>
      <div>Contact</div>
   </div>
<body>

＆＃13;

最后我不明白你到底想要什么，但如果你想要下拉是屏幕的高度你可以改变这个属性：

 min-height: calc(100% - 50px);

：calc(100vh - 50px);

.dropDown个样式

Answer 5

从详尽的研究来看，似乎不可能有一个高度为100％的div来填充屏幕的高度，而第二个div的高度为100％以覆盖enire页面的高度。

划分100％视口高度第二个div整个页面的100％高度

5 个答案: