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>