Высота CSS 100% в Firefox не работает

У меня есть следующие HTML и CSS, которые ведут себя совершенно иначе в Firefox и Chrome.

.container {
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: inline-table;
}

.content {
  background-color: red;
  width: 30%;
  height: 100%;
}

<div class="container">
    <div class="content"></div>
</div>
<div class="container">
    <div class="content"></div>
</div>

Ответ 1

Попробуйте изменить display: inline-table; на display: inline-block;.

Ответ 2

http://jsfiddle.net/yAa3y/12/

Я мог бы заставить его работать, когда я использовал

.content {
    display: inline-table;
 }

Ответ 3

Элемент не отображается должным образом, поскольку FireFox блокирует его до размера внутреннего содержимого, но я уверен, что вы уже собрали это.

Я заметил, что высота контейнера, которая удерживает внутреннюю, фиксирована на 50. Если у вас есть фиксированная высота для внешнего контейнера, вы можете соответствовать высоте для внутреннего элемента.

Я знаю, что это не динамическое решение, основанное на процентах, а работа вокруг.

Ответ 4

попробуйте использовать его

position: absolute; 
top: 0px;
bottom: 0px;
width: 50px;