Child DIV изменить высоту, чтобы соответствовать другому дочернему DIV

Question

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

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

Заранее благодарю за помощь.

Джошуа

---

Моя проблема решена.

Первый ответ, который я увидел от 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

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

• способ javascript, используйте jquery равную высоту

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

• другой способ использует css

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

Answer 2

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

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

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

Вот плагин jQuery , который позволяет сделать это так же просто, как:

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

Answer 3

Вот метод jquery, который я нашел на CSS Tricks ОТЛИЧНЫЙ ресурс!

var maxHeight = 0;

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

$ (это) .height (); } });

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

Answer 4

Это очень распространенная проблема в html / css.В Javascript есть хитрости, но я не уверен, что это то, что вы ищете.

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

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

Столбцы равной высоты - хитрость CSS, которую я еще не тестировал.