css - 如何设置一个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的高度，所以阴影太短而无法覆盖内容分区
我一直在玩 min-height，但是 min-height:auto 不起作用，而且“溢出”的值都没有达到我想要的效果。
任何适用于任何浏览器的解决此问题的干净方法？ 我应该使用 javascript 吗？以其他方式重做一切？

更新:这是它的外观图片

Update2:main 的高度似乎直接是窗口的高度 (100%) 所以我 main 总是窗口的大小，如果小它小于里面的内容，我试着玩 min-高度没有成功。预期的结果是它会调整大小，直到达到其内容的大小，此时它应该停止。

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;
}

希望对您有所帮助:)