CODEWITHSUNDEEP
htmlcss
pdiddy
pdiddy

Reputation: 6297

CSS height 100% in firefox not working

I have the following HTML and CSS that behaves totally different in Firefox and Chrome.

JSFiddle.

.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>

In Chrome it displays correctly but not in Firefox.

Chrome:
enter image description here

Firefox:
enter image description here

By inspecting the content div in Firefox, the height is 0.

Why does it work in Chrome and Safari, but not in Firefox? I notice that removing the display: inline-table will work but the container div will be stacked instead of inline.

Upvotes: 22

Views: 34704

Answers (4)

Ganesh Kandu
Ganesh Kandu

Reputation: 621

try this its working

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

Upvotes: 4

kmoe
kmoe

Reputation: 2083

Try changing display: inline-table; to display: inline-block;.

Upvotes: 12

RacerNerd
RacerNerd

Reputation: 1579

The element does not display properly because FireFox is locking it to the size of the inner content, but I'm sure you already gathered that.

I noticed that the container height that holds the inner is fixed to 50. If you have a fixed height for the outer container, you could match the height for the inner element.

I know this isn't the dynamic solution based on percent, but it's a work around.

Upvotes: 0

CRABOLO
CRABOLO

Reputation: 8793

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

I could only get it to work when I used 

.content {
    display: inline-table;
 }

Upvotes: 8

Related Questions