100%可以达到100%任何高度。举例来说，如果我有一个父div那是1000px高大的，小时候div是在100%高度，那么这个孩子div可能理论上比视，或小于视口的高度小得多的高度高得多，即使是div设置在100%身高。

如果我改为将其子级div设置为100vh，则它将 仅填充100%视口的高度，而不必 填充 父级div。

body,

html {

    height: 100%;

}



.parent {

    background: lightblue;

    float: left;

    height: 200px;

    padding: 10px;

    width: 50px;

}



.child {

    background: pink;

    height: 100%;

    width: 100%;

}



.viewport-height {

    background: gray;

    float: right;

    height: 100vh;

    width: 50px;

}


<div class="parent">

    <div class="child">

        100% height

        (parent is 200px)

    </div>

</div>



<div class="viewport-height">

    100vh height

</div>