Question

我正在尝试一种液体网页设计，其中包含内容框外部的阴影。

所以我尝试将内容放入一个包含div的内容中，并将阴影放在一个单独的内容中。除了当窗口缩小超过定义的最小宽度时，这似乎工作正常。

阴影包含在div容器中，设置为100％宽度和高度，最小宽度为882px（内容宽度为700px，内容加上设置为91px最小宽度的两个阴影）。左右阴影位于单独的div中，设置为10％宽度（最小宽度为91px），中间的“spacer”div为80％（最小宽度为700px），所有设置为向左浮动，因此它们将显示为单独的列。你单击链接，你可以看到如果窗口收缩到一个打破最小宽度规则的宽度，r-shadow div将消失。我已经尝试了所有溢出参数和clearfix。我还尝试了一些其他棘手的选项绝对的位置。到目前为止这是最干净的，减去div消失。请告知。

Answer 1

不需要单独的div用于阴影，如pol所述，CSS box-shadow属性可以，这里是一个片段：

html,
body {
    height: 100%;
}
.container {
    width: 100%;
    height: 100%;
    background-color: lightgray;
}
.inside {
    width: 66%;
    height: 100%;
    margin: 0 auto;
    background-color: lightgray;
    box-shadow: 12px 0 15px -4px gray, -12px 0 8px -4px gray;
}

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

100％高度div消失

1 个答案: