Question

我有问题，我有一个固定的容器，里面我有绝对div，我想将.absolute div height:100%;设置为容器div的完整高度（500px）。以下是我试图解决我的问题，这是因为我想创建带有切换容器的移动菜单，对我来说，移动电话屏幕的高度 100% 非常重要。

https://jsfiddle.net/d1bh9ncs/

HTML

<div class="container">
  <div class="fixed">
    <div class="absolute">

    </div>
  </div>
</div>

CSS

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed; 
  width:100%;
  height:50px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height:100%;
  width:100%;
  background-color:green;
  top:51px;
  left:0px;
}

Answer 1

父div .fixed绝对定位，高度为50px。因此，对其使用height: 100%的孩子将继承相对高度（即50px）。

在height: 100vh;上使用.absolute。我使用了计算出的高度height: calc(100vh - 51px)来避免因top: 51px而导致的滚动条。

注意：vh是视口高度的1/100（可见网页高度）。

<强> Updated Fiddle

.absolute {
  position: absolute;
  height: calc(100vh - 51px);
  width: 100%;
  background-color: green;
  top: 51px;
  left: 0px;
}

Answer 2

你使用固定div作为绝对div的父div，绝对div可以有100％的固定div，如果你在Percentage中添加高度值，它可以扩展到它的父高度。如果你希望它扩展为父高度，您必须在px（像素）中添加高度

.container{
  width:100%;
  height:500px;
  background-color:#ddd;
}
.fixed{
  position:fixed;
  width:100%;
  height: 101px;
  background-color:red;
  top:8px;
  left:8px;
  right:15px;
}
.absolute{
  position:absolute;
  height: 117px;
  width:100%;
  background-color:green;
  top: 0px !important;
  left:0px;
  z-index: 99999999;
  top: 50px;
}

Answer 3

尝试以高度为准。放.absolute height = 100vh

 .absolute
 {
 position:absolute;
 height:100vh;
 width:100%;
 background-color:green;
 top:51px;
 left:0px;
}

https://jsfiddle.net/bj9wcdLs/

Answer 4

更现代的方法是使用vh和vw（视图高度和宽度）。而不是其父母的百分比（如％）是整页的百分比。

在下面的例子中，我做了一些计算，以帮助它计算出我们真正想要的尺寸。

example = function() {
  var abSel = document.querySelector(".absolute");
  abSel.classList.toggle('hidden');
}

body {
  margin: 0;
}
.container {
  width: 100vw;
  height: 100vh;
  background-color: #ddd;
}
.fixed {
  position: fixed;
  width: calc(100vw - 16px);
  height: 50px;
  line-height: 50px;
  text-align: center;
  background-color: red;
  top: 8px;
  left: 8px;
}
.absolute {
  position: absolute;
  border-top: 1px solid #ddd;
  height: calc(100vh - 59px);
  width: calc(100vw - 16px);
  background-color: green;
  top: 50px;
}
.hidden {
  display: none;
}

<div class="container">
  <div class="fixed">
    <button onclick="example()">Example</button>
    <div class="absolute hidden"></div>
  </div>
</div>

希望这有帮助。

Answer 5

就像sticku说的那样。

更改您的代码

.fixed{
   position:fixed; 
   width:100%;
   height:100%; //must be 100%
   background-color:red;
   top:8px;
   left:8px;
   right:15px;
}

为什么我不能使绝对div高度100％

5 个答案: