100% 高度 div 消失答案

【问题标题】：100% height div disappears100% 高度 div 消失
【发布时间】：2017-05-09 13:04:10
【问题描述】：

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

这个电话都可以在这里看到：http://mikesidelka.com/2/

所以我试图做到这一点，将内容放入一个包含 div 的内容中，并将阴影放在一个单独的部分中。这似乎工作得恰到好处，除了当窗口缩小超过定义的最小宽度时。

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

【问题讨论】：

使用 box-shadow CSS 属性。

标签： html css overflow clearfix

【解决方案1】：

阴影不需要单独的divs，正如 pol 所说，CSS box-shadow 属性就可以了，这里是 sn-p：

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>

【讨论】：