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

enter image description here Основная проблема с 100% высота DIV

/* 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>

Как пылает я получаю меню слева, чтобы продлить до дна?

Пожалуйста, обратите внимание, что я испробовал столбцы faux, но они просто не работают, потому что по какой-то причине белая основная коробка находится на передней панели.

источник

2011-01-25 Tom Gullen

Было бы хорошо, чтобы указать 'мин-height' для левой колонки? – thirtydot

Да, но это не заполняет высоту –

У меня есть идея для решения, которое будет работать хотя бы в IE7 +, если вы можете указать 'min-height' в левом столбце. Это звучит приемлемо? – thirtydot

Что относительно этого?

http://jsfiddle.net/PH3t2/

Я добавил postion:absolute, top:0 и bottom:0 вашему leftmenu

Я дал mainBox padding-left: 205px

Я дал mainWrapper position:relative

Вы можете добавить содержимое на mainBox, чтобы увидеть, что leftMenu растет.

Чтобы закончить это прочь и сделать его work in IE6 добавить:

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

источник

2011-01-25 12:21:19 Bazzz

Удивительно! Благодаря! –

Попробуйте добавить больше содержимого в левый столбец. Это в значительной степени решение, о котором я думал, но ему не хватает последних штрихов (таких как 'min-height' и как заставить его работать в IE6). – thirtydot

Удаление четких div исправляет небольшую ошибку в IE6, а также –

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

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

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

Живого пример:http://jsbin.com/udowu4/2

источник

2011-01-25 12:01:26 Sotiris

Mainwrapper расширяется с содержимым внутри него, он не имеет фиксированной высоты –

проверить отредактированный ответ – Sotiris

Спасибо за решение, я бы предпочел бы его в чистом CSS. Кажется смешным, что у CSS нет такого решения. –

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

Установите .mainBox фон для прозрачного и сделать .mainWrapper фон как 200px серый с левой стороны и все другие ширины на белый.

источник

2011-01-25 12:03:09 Olegas

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>

источник

2011-01-25 12:34:02

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

ответ

Смежные вопросы