100% высота div исчезает

Question

Я пытаюсь создать жидкий веб-дизайн, который содержит тень на внешней стороне окна содержимого.

Это кал все можно увидеть здесь: http://mikesidelka.com/2/

Так что я попытался сделать это, имея содержание в один, содержащий DIV, и тени в отдельный. Кажется, что это работает правильно, за исключением того, что окно сокращается после определения минимальной ширины.

Тени содержатся в контейнере div, установленном на 100% ширину и высоту, с минимальной шириной 882px (ширина 700px min для контента плюс две тени, установленные на ширину 91px min). Левая и правая тени находятся в отдельном наборе div, равном 10% ширины (min-width 91px) со средним разделителем «spacer» на 80% (минимальная ширина 700 пикселей), все настроены на поплавок влево, чтобы они отображались как отдельные столбцы. вы видите ссылку, вы можете видеть, что div-тэг исчезнет, ​​если окно сжимается до ширины, которая нарушает правила минимальной ширины. Я пробовал все параметры переполнения и clearfix. Я также пробовал несколько других сложных опций . с абсолютными позициями Это до сих пор самым чистое, минус ДИВОЙ исчезающий Пожалуйста посоветуйте

Answer 1

Нет необходимости в отдельных div с для теней, как указано Pol, блочное-теневое свойство будет делать, вот фрагмент коды:..

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>