Css 为绝对定位且高度为100vh的div提供底部空白

我有一个div的绝对定位高度为100vh。它也有一个影子。不，我想给它一个20px的边缘底部，以便看到底部阴影。可能吗？有什么把戏吗？

身体{
保证金：0；
}
.集装箱{
宽度：300px；
高度：100vh；
背景：黄色；
边缘底部：100px；
盒影：红色10px 10px 10px；
左边距：自动；
右边距：自动；
左：0；
右：0；
位置：绝对位置；
}

为什么不在底边加上20px呢

margin-bottom: 120px;

您可以使用

calc（）

并从高度减去

20px

height: -webkit-calc(100vh - 20px);
height: -moz-calc(100vh - 20px);
height: calc(100vh - 20px);

---

另一种不使用

calc（）

但更改标记的方法是引入一个内部容器，如下所示

<div class="container">
    <div class="inner">
        ...
    </div>
</div>

---

示例：

OK，在另一个答案中已经发布了一种有效的方法。请注意，

calc（）

在Webkit浏览器上使用视口单位。或者，您可以为绝对定位的元素使用

%

值：无需更改标记。

<div class="container">
    <div class="inner">
        ...
    </div>
</div>

.container {
    -webkit-box-sizing: padding-box;
    -moz-box-sizing: padding-box;
    box-sizing: padding-box;
    width: 300px;
    height: 100vh;
    padding : 0 20px 20px 0; /* we create room for the box shadow inside the
                                container. Padding is included in the height 
                                due to the box-sizing property
                              */
}

.inner {
    width: 100%;
    height: 100%;
    background: yellow;
    box-shadow: red 10px 10px 10px;  
}