Div ребенок должен иметь рост 100% div родитель - PullRequest
Новая
       22

Div ребенок должен иметь рост 100% div родитель

0 голосов
/ 19 января 2012

У меня есть 2 деления, для которых установлено значение 60% ширины, но нет настройки для высоты, это родитель.Внутри него у меня есть div, который установлен на 15% ширины, 100% высоты (не работает) и float: left.Я также пытался сказать, что у дочернего элемента div есть абсолютная позиция (слева: 0px; top: 0px; bottom: 0px;), но затем текст из родительского элемента div преодолевает это.Не такой хороший родитель.

Пояснение: я не помещаю два div в родительский, только один (дочерний div).Но я помещаю некоторый текст в родительский div.

Вот код css (он немного запутан): 

#parent{position:absolute;right:20%;width:60%;background-image:url('x.png');direction:rtl;margin-top:-1px;}
#child{width:15%;padding-right:12px;margin-top:-5px;padding-top:5px;float:left;height:100%;background-image:url('y.png');}

А вот код html: 

<div id="parent">
<div id="child">line 1<br>line 2<br>line 3<br></div>
some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here. some text here.
</div>

Пожалуйста, помогите мне!

ОБНОВЛЕНИЕ:

Я не могу дать родительскому div фиксированную высоту, потому что мне нужно, чтобы он сам подстраивался под содержимое (то есть текст, которыйперебери ребенка)Видишь проблему?Это нормально, что я могу сделать это совершенно по-другому, я открыта для обучения.

1 Ответ

5 голосов
/ 19 января 2012

Ваш родитель должен иметь значение высоты, чтобы ребенок мог наследовать.

Я удалил части вашего CSS, которые не имеют прямого отношения к ответу, чтобы дать вам пример.

В вашем примере CSS дочерний элемент div выполняет 100% не установленного значения.
Это не будет работать так, как вы ожидаете: 

#parent{background:#F00;}
#child{float:left; height:100%; background:#FF0;}

Это будет работа: 

#parent{height:500px; background:#F00;}
#child{float:left; height:100%; background:#FF0;}

Пожалуйста, дайте мне знать, если я не понял, но я верю, что это отвечает на ваш вопрос.

...