Сделать ВЫСОТА Див совпадает высоту родительского Div, который устанавливается автоматически

Это действительно просто, но я не знаю, как решить этуСделать ВЫСОТА Див совпадает высоту родительского Div, который устанавливается автоматически

<html> 
    <body> 
     <div style="width:500px; background:black;"> 
      <div style="display:inline-block; width:200px; height:300px; background:yellow;"></div> 
      <div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;"></div> 
     </div> 
    </body> 
</html>

Вот моя скрипка: Fiddle

Я хочу Высота розового div соответствует черному div, который установлен auto.

Редактировать: на самом деле я хочу совместить розовую высоту с желтой, чтобы высота черного соответствовала желтым.

источник

2014-01-21 William

Если вы установите тело 'высота: 100%' это нормально. –

Я отредактировал вопрос. – William

position:absolute может быть ответом.

<html style="height:100%;"> 

    <body style="height:auto;position:relative;"> 
     <div style="width:500px; height:100%; background:black;"> 
      <div style="display:inline-block; width:200px; height:300px; background:yellow;"></div> 
      <div style="display:inline-block; vertical-align: top; width:100px; height:100%; background:pink;position:absolute; 
left:100px; 
margin-left:0.25em; 
top:0; 
bottom:0;"></div> 
     </div> 
    </body> 

</html>

http://jsfiddle.net/QG572/2/

Или использовать display:table, чтобы держать все в потоке:

<html style="height:100%;"> 

    <body style=""> 
     <div style="width:500px; height:100%;display:table; background:black;"> 
      <div style="display:table-cell; width:200px; height:300px; background:yellow;"></div> 
      <div style="display:table-cell; vertical-align: top; width:100px; height:100%; background:pink;"></div> 
      <div style="display:table-cell;"><!-- to fill 100px left--></div> 
     </div> 
    </body> 

</html>

http://jsfiddle.net/QG572/3/

источник

2014-01-21 19:14:07

в обоих случаях, высота на кузове и черный div не нужны, скрипка быстрые и грязные обновления :) –

делает отображение: работа с табличными ячейками во всех браузерах? – William

из IE8 ниже, как и этот абсолютный метод калибровки, ниже вам нужно вернуться с помощью float и javascript, чтобы получить высоту самого высокого контейнера. –

Установка высоты в обертке DIV и позволяя детям контейнеры унаследовать высота может работать для вас.

HTML:

<html> 
    <body> 
     <div class="black"> 
      <div class="yellow"></div> 
      <div class="pink"></div> 
     </div> 
    </body> 
</html>

CSS:

.black{ 
     width: 500px; 
     height: 300px; 
     background: black; 
    } 
    .black div { 
     display: inline-block; 
     width: 200px; 
     height: inherit; 
    } 

    .yellow{ 
     background: yellow; 
    } 
    .pink { 
     background: pink; 
    }

источник

2014-01-21 21:18:16 badAdviceGuy

Сделать ВЫСОТА Див совпадает высоту родительского Div, который устанавливается автоматически

ответ

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