Как установить минимальную высоту div для настройки содержимого

Question

Я пытаюсь создать веб-страницу со следующей структурой: 1 большой div (основной) и 3 div внутри, левая тень, содержимое, и правая тень. Это код css для них, mleft и mright - это тени.

body,html{height:100%;} 
.main { 
width:900px; 
    height:100%; 
} 

.mleft, .mright { 
width:25px; 
height:100%; 
float:left; 
} 
.mleft { background-image: url("shadowleft.jpg"); } 
.mright { background-image: url("shadowright.jpg"); } 

.content { 
width:850px; 
float:left; 
    background-color:red; 
} 

И HTML, как это:

<div class="main"> 
    <div class="mleft"></div> 
    <div class="mcontent"> 
    (content, some text and images) 
    </div> 
    <div class="mright"></div> 
</div> 

Я хочу, чтобы это было просматривать в больших и малых экранах, проблема заключается в том, что при просмотре в небольших экранах или сделать окно небольшого, основной высота div идет ниже высоты содержимого div, поэтому тень слишком короткая для покрытия содержимого div.
Я играл с мини-высотой, но min-height: auto, не работает, и ни одно из значений «переполнения» не делает то, что я хочу.
Любой чистый способ решения этого вопроса, который работает в любых браузерах? Должен ли я использовать javascript ?, повторить все по-другому?

Update: Это образ того, как он выглядит

Update2: Высота основной, кажется, непосредственно высота окна (100%), так что я основной всегда размер окна, который, если он меньше, чем содержание внутри него, я пробовал играть с минимальной высотой без успеха. Ожидаемый результат заключается в том, что он изменяется до тех пор, пока он не достигнет размера его содержимого, когда он должен остановиться.

Answer 1

ОК, я удалил все старые вещи ... нашел решение, используя позиционирование :)

http://jsfiddle.net/Damien_at_SF/AtX4A/

В основном, тени сидеть внутри DIV контента и с абсолютным позиционированием размещены на 0 , 0 влево и вправо 0,0 (или вы могли бы переместить их за пределами содержания с использованием отрицательного позиционирования)

UPDATE: поставил главный DIV назад и применяется к margin:auto это стилю для центровки всего много :)

HTML

<div class="main"> 
    <div class="mcontent"> 
    <div class="mleft"></div> 
    <div class="mright"></div> 
    (content, some text and images)> 
    <div style="clear:both;"></div> 
    </div> 
</div> 

CSS

body,html{ 
    height:100%; 
    margin:0px; 
    padding:0px; 
} 

.main { 
    width:900px; 
    height:100%; 
    margin:auto; 
} 

.mleft, .mright { 
    width:25px; 
    height:100%; 
} 

.mleft { 
    background:green; 
    position:absolute; 
    top:0px; 
    left:0px; 
} 

.mright { 
    background:blue; 
    position:absolute; 
    top:0px; 
    right:0px; 
} 

.mcontent { 
    width:850px; 
    background-color:red; 
    position:relative; 
    padding-left:25px; 
} 

Надежда, что помогает :)