Question

我的div绝对位于height: 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: -webkit-calc(100vh - 20px);
height: -moz-calc(100vh - 20px);
height: calc(100vh - 20px);

Calc support across browser

另一种不使用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/

Answer 2

为什么不在底部边距添加20px？

margin-bottom: 120px;

给一个绝对位于div的高度：100vh

2 个答案: