Ребенок DIV меняет высоту в соответствии с другим ребенком DIV

Question

Я прочесываю интернет, ища решение для этого, и я уверен, что это прямо под моим носом. Кто-нибудь, пожалуйста, помогите?

У меня есть родительский div с двумя детьми. Каждый ребенок имеет статическую ширину, и мне нужно, чтобы каждый из них менял свою высоту, чтобы соответствовать другой по содержанию. Другими словами, если «child-div-a» выше, чем «child-div-b», тогда «child-div-b» необходимо автоматически масштабировать ту же высоту «child-div-a». чтобы родитель мог масштабироваться до самого большого дочернего элемента, но не другого дочернего элемента. Кажется, что я не могу заставить левый div (a) всегда иметь ту же высоту, что и правый/контент div (b). Вы бы подумали, что это будет очень простой или, может быть, я идиот.

заранее спасибо за всю помощь.

Джошуа

---

Мой probelm была решена.

Первый ответ, который я увидел из japanPro, содержал ссылку на блог Эда Эллиота. Это содержало информацию об искусственных колонках. Я довольно простая концепция, которую я не могу поверить, что не видел. Это был дым и зеркала, но я был слишком сфокусирован на иллюзии, чтобы увидеть, как можно сделать трюк (если это произойдет с тех пор). Вот CSS, который я придумал:

#child-div-container{ 
    width: 800px; 
    position: relative; 
    overflow: hidden; 
    background-image: url(../../../images/faux_column_bkground.gif); 
    background-repeat: repeat-y; 
    } 

#child-div-a{ 
    float: left; 
    width: 125px; 
    } 

#child-div-b{ 
    float: left; 
    width: auto; 
    height: 100%; 
    margin-left: 5px; 
    } 

Еще раз спасибо всем, кто ответил на мои потребности. Все дали жизнеспособную информацию. Я только надеюсь, что смогу разработать свои навыки и знания, чтобы предлагать советы, а не просить об этом.

Джошуа

Answer 1

есть два способа сделать

• яваскрипта путь, использование JQuery равной высоте

http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

• Другой способ заключается в использовании CSS

http://www.ejeliot.com/blog/61

Answer 2

Это очень распространенная проблема в HTML/CSS. В Javascript есть трюки, но я не уверен, что это то, что вы ищете.

Два решения этой проблемы, которые не используют JavaScript:

Faux Columns - работает только если фон столбца, который должен растягиваться имеет только один цвет фона или повторяющийся рисунок (поскольку он использует изображение или граница для подделки столбца). Это может не сработать, но если вы не можете предсказать с div, он будет выше.

Equal Height Columns - Трюк CSS, который я еще не тестировал.

Answer 3

Я не знаю хорошего ответа на основе CSS для вас. Но вы можете сделать это легко с помощью jQuery.

Предположим, у вас есть следующая разметка

<div id="parent"> 
    <div>My content</div> 
    <div>Other div with content</div> 
</div> 

Вот jQuery plugin, что позволяет сделать это так же просто, как:

$("#parent div").equalHeights(); 

Answer 4

Вот метод JQuery, как я нашел на CSS Tricks отличный ресурс!

var maxHeight = 0;

$("div").each(function(){ 
    if ($(this).height() > maxHeight) { maxHeight = 

$ (this) .height(); } });

$("div").height(maxHeight);