Question

我有一个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成为屏幕的高度，而不是容器？

Answer 1

.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;
}

小提琴：https://jsfiddle.net/ek7zfzua/1/

Answer 2

为了让孩子的身高达到100％，你必须先让父母div为100％。除非父div的边界足够大，否则子div不能打破其父级的边界并显示在完整的屏幕上。

Answer 3

您可以使用height:100vh代替百分比：https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

CSS嵌套div高度100％的屏幕而不是父高度

3 个答案: