100%高度div的主要问题

Question

/* Left menu */
.leftMenu{
    width: 200px;
    border:2px solid green;
    float:left;
    background-color:#c0c0c0;
}

/* Main Content area */
.mainBox{
    border:2px solid red;
    background-color: #ffffff;
}
.mainWrapper{
    border:2px solid white;
}

如何让

<div class="mainWrapper">
    <div class="leftMenu">
        left
    </div>
    <div class="mainBox">
        main<br /><br /><br /><br /><br />
    </div>        
    <div class="clear"></div>
</div>

火焰将左侧菜单延伸到底部？

请注意，我尝试过人造柱，但它们不起作用，因为出于某种原因白色主框位于前面。

Answer 1

这又如何呢？

http://jsfiddle.net/PH3t2/

我添加了 postion:absolute ， top:0 和 bottom:0 到你的左侧菜单

我已经给了 mainBox padding-left: 205px

我已经给了 mainWrapper position:relative

请随意向 mainBox 添加内容，以查看 leftMenu 也会增长。

---

要完成此操作并使其在 IE6 中工作，请添加：

.leftMenu, .mainBox {
    min-height: 250px;
    height: auto !important;
    height: 250px;
}

Answer 2

使用假列时，需要将背景图片设置为.mainWrapper。

将 .mainBox 背景设置为透明，并将 .mainWrapper 背景设置为左侧 200px 灰色，所有其他宽度设置为白色。

Answer 3

您需要为 .mainWrapper 设置固定高度，例如 100px；然后将 .leftMenu 的高度设置为 100%;

编辑： 根据您的评论，我不确定是否可以使用纯 css 。如果 JavaScript 解决方案可以接受，那么您可以使用 jquery 和以下代码：

$(document).ready(function(){
    $('.leftMenu').css("height",$('.mainWrapper').height());
});

实例： http ://jsbin.com/udowu4/2

Answer 4

CSS 仿列是最好的解决方案。以下解决方案可能有效，但最终可能会遇到其他问题。注意：无论哪一列更高，这都有效。

.leftMenu {
  width: 200px;
  float: left;
  background-color: #C0C0C0; /* C0C0C0 is used for demonstration
                                ideally this should be same as the
                                border color used in the next style */
}
.mainBox {
  border-left: 200px solid #CCCCCC;
}
.mainWrapper {
  border: 2px solid #000000;
  background-color: #F8F8F8; /* this should be set to the color that displays
                                behind mainBox; its best to set it here in case
                                the left column becomes taller than main column */
}

<div class="mainWrapper">
  <div class="leftMenu">left</div>
  <div class="mainBox">
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main<br>
    main
  </div>
  <div class="clear"></div>
</div>