как установить минимальную высоту 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, но min-height: auto, не работает, и ни одно из значений «overflow» не делает то, что я хочу.
Какой-нибудь чистый способ решить эту проблему, который работает в любых браузерах?Должен ли я использовать javascript ?, переделать все по-другому?

Обновление: это изображение того, как это выглядит

Обновление 2: высота main, кажется, непосредственно высотаwindow (100%), поэтому я всегда использую размер окна, который, если он меньше, чем содержимое внутри, я попытался поиграть с min-height безуспешно.Ожидаемый результат заключается в том, что он изменяет размер до тех пор, пока не достигнет размера своего содержимого, когда он должен остановиться.

Answer 1

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

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

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

ОБНОВЛЕНИЕ: верните основной 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;
}

Надеюсь, это поможет:)