css - 为绝对定位且高度为 : 100vh 的 div 提供边距底部

Question

我有一个绝对定位的 div，高度:100vh。它也有影子。不，我想给它一个 20px 的边距底部，以便看到底部阴影。那可能吗？任何技巧？ jsfiddle

<div class="container"><div class="aux"></div></div>

body {

    margin: 0;
}
.container {

    width: 300px;
    height: 100vh;
    background: yellow;
    margin-bottom: 100px;
    box-shadow: red 10px 10px 10px;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    position: absolute;
}

Answer 1

您可以使用 calc() 并从高度中减去 20px

height: calc(100vh - 20px);

---

另一种不使用 calc() 但更改标记的方法是引入一个内部容器，就像这样

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

和这个CSS

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

示例:http://jsfiddle.net/sp9bh/2/[1]: http://caniuse.com/#feat=calc