100％高度div消失

Question

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

该卡都可以在这里看到：http://mikesidelka.com/2/

所以我试图做到这一点，通过具有内容为包含分区之一，并在一个单独的阴影。这似乎是正确的，除了当窗口收缩超过定义的最小宽度时。

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

Answer 1

无需单独div S代表的阴影，因为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>