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

我有问题，我有一个固定的容器，在他们里面我有绝对的div，我想设置.absolute div height:100%;为容器div的全高（500px）。下面是我试图解决我的问题，这需要，因为我想创建与切换容器的手机菜单，其重要的是我的手机屏幕高度为100%。为什么我不能使绝对的高度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; 
}

来源

2016-08-01 ml92

你的.fixed div的高度为50px，而你的.absolute div的100％相对于.fixed，所以他也有50px的高度。 – sticksu

你可以使用'height：100vh;'为'。绝对' –

父DIV .fixed绝对定位，并具有高度50像素。因此，在其子节点上应用height: 100%将继承相对高度（即50px）。

在.absolute上使用height: 100vh;。我使用了计算高度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; 
}

来源

2016-08-01 12:52:22 Pugazh

尽量给高度VH。把.absoluteheight = 100vh

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

https://jsfiddle.net/bj9wcdLs/

来源

2016-08-01 12:47:52 Abhishek

你应该解释一下vh/vw和％ –

之间的区别，但是OP想要“full container of container div（500px）” – blonfu

'vh'代表'viewport-height'这是'css3单元'（不好浏览器支持）并且与视口相关（如术语所述）。从另一方面来看，百分比与他们的父母有关......在这里看看可能是件好事：http://webdesign.tutsplus.com/articles/7-css-units-you-might-not -know-about - cms-22573 – Hitmands

就像sticksu说。

更改代码

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

来源

2016-08-01 12:50:50

将'.fixed'的高度更改为100％将覆盖整个视图端口（即不会看到其他内容） – Pugazh

您正在使用固定股利作为绝对的div的父格，绝对的div可以有固定的div的100％，如果你在增加高度值不能明显地延伸到其父的高度Percentage.If你想让它扩展为父母身高，你必须在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; 
}

来源

2016-08-01 12:53:25

这样做的一个更现代的方法是使用VH和VW（查看高度和宽度）。而不是其父级的百分比（如％）是整个页面的百分比。

在下面的例子中，我已经做了一些calc来帮助确定我们真正想要的东西的大小。

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>

希望这有助于。

来源

2016-08-01 13:01:13

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

回答

相关问题