Основная проблема со 100% высоты

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

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 2

вам нужно установить фиксированную высоту для .mainWrapper, например 100px;и затем вы устанавливаете высоту .leftMenu на 100%;

Редактировать: Согласно вашему комментарию, я не уверен, возможно ли это с чистым CSS.Если приемлемо решение javascript, вы можете использовать jquery и следующий код:

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

Пример в реальном времени: http://jsbin.com/udowu4/2

Answer 3

Как насчет этого?

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 4

При использовании искусственных столбцов необходимо установить фоновое изображение в .mainWrapper.

Установите фон .mainBox на прозрачный и сделайте фон .mainWrapper серым цветом с левой стороны 200 пикселей, а всю ширину - белым.