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

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

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

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

直播示例： http://jsbin.com/udowu4/2

Answer 2

CSS Faux色谱柱是最好的解决方案。以下解决方案可能有效，但您可能会遇到其他问题。注意：无论哪个列更高，都可以使用。

.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>

Answer 3

这个怎么样？

http://jsfiddle.net/PH3t2/

我已将postion:absolute，top:0和bottom:0添加到您的左侧菜单

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

我已经给了mainWrapper position:relative

随意添加内容到mainBox，看看leftMenu也增长了。

---

要完成此操作并将其设为work in IE6，请添加：

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

Answer 4

使用仿色列时，需要将背景图像设置为.mainWrapper。

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