高さ100％のdivが消える

Question

コンテンツボックスの外側に影が入った液体ウェブのデザインを試みています。

このCALはすべてここに見られること：http://mikesidelka.com/2/

だから私はdiv要素を含むもの、および別の中の影の中にコンテンツを持っていることによって、これを実行しようとしました。これはちょうどうまく動作するように見えますが、ウィンドウが定義された最小幅を超えて縮小されている場合を除きます。

シャドウは、100％幅と高さに設定されたdivコンテナに含まれ、最小幅は882px（コンテンツの場合は700px分、2つのシャドウは91px分の幅に設定されます）。左右の影は別々のdivの10％幅（最小幅91px）に設定され、80％の中央の "spacer" div（最小幅700px）はすべて浮動小数点として設定され、別々の列として表示されます。あなたがリンクをクリックすると、ウィンドウが最小幅の規則を破る幅に縮小すると、r-shadow divが消えるのがわかります。オーバーフローのパラメータとclearfixを試してみました。絶対位置とこれはこれまでのところ最もきれいで、マイナスのdivが消えるまでご連絡ください

Answer 1

影に別々のdivのための必要性無し、POLはスニペットここでは、CSSボックスシャドウプロパティが行うだろう、述べたように：。。。

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>