100% 高度 div 消失

Question

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

所以我试图做到这一点，方法是将内容放入一个包含 div 的文件中，并将阴影放在一个单独的文件中。这似乎工作得很好，除了当 window 缩小到超过定义的最小宽度时。

阴影包含在设置为 100% 宽度和高度的 div 容器中，最小宽度为 882 像素（内容的最小宽度为 700 像素加上两个阴影的最小宽度设置为 91 像素）。左阴影和右阴影分别设置为 10% 宽度（最小宽度 91px），中间的“间隔符”div 为 80%（最小宽度 700px），全部设置为浮动左，所以它们将显示为单独的列。如果单击 link，您可以看到如果 window 缩小到打破最小宽度的宽度，则 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 消失

100% height div disappears

html

css

overflow

clearfix