logo标签列表

CSS嵌套的div高度应该是屏幕的100%，而不是父元素的高度

htmlcss
3

我有一个固定在页面顶部的div头部，其中包含一个嵌套的div。容器div的高度为70px，是一个固定的高度。

我希望嵌套的div的高度占据整个屏幕的100％，而不是容器div的高度。

这是我的代码：

<div class="header">
    <div class="nested">Content</div>
</div>

我的CSS：

.header {
    height: 70px;
    width: 100%;
    background-color: #ccc;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
} 

.nested {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    overflow-x: visible;
    overflow-y: auto;
    background-color: #ddd;
}

如何将嵌套的div的高度设置为屏幕高度，而不是容器高度？

你尝试过在嵌套元素上使用“position: fixed”吗？ - tenderloin
这个问题是开玩笑的吗？嵌套的 div 不能大于 70px，否则它将违反容器的规则。如果你想让嵌套的 div 适应屏幕高度，那么它就不能被嵌套！ - Lelio Faieta
3个回答
3
.header {
    height: 70px;
    width: 100%;
    background-color: #ccc;
    position: fixed;
    left: 0;
    top: 0;
    display: block;
} 

.nested {
    display: block;
    position: relative;
    margin-top: 70px;
    height:100vh;
   background-color: #ddd;
}

Fiddle:https://jsfiddle.net/ek7zfzua/1/

太棒了！这正是我在寻找的。谢谢！ - Pierre
0
为了让子 div 的高度达到 100％，您首先必须确保父 div 的高度为 100％。 除非父 div 的边界足够大，否则子 div 无法突破其边界并在完整屏幕上显示。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接