Firefox, Internet Explorer 9 + Problem mit div Höhe von 100% innerhalb eines td (Arbeitsbeispiel auf Chrom)

Question

Nehme: http://jsfiddle.net/zVscL/4/

.edit-me { 
height:100%; /*does not behave the same as Chrome*/ 
width:10px; 
border:1px solid blue; 
background:red; 
float:left; 
overflow: auto; 
} 

öffnen Sie die Seite in Chrome, dann Firefox. Das blaue div erbt nicht

Gibt es eine Erklärung, warum dies geschieht? Irgendwelche Korrekturen? Reine HTML/CSS-Lösungen sind vorzuziehen.

Ich habe diesen Scheiß stundenlang versucht, CSS dazu zu bringen, sich zu benehmen, und wenn ich es endlich mache, macht FF das. Meine Entwicklungszeit auffressen.

Answer 1

Versuchen Sie, die Höhe des tr und td-100% Einstellung:

tr, td { height: 100%; } 

Generell zu bekommen height: 100% richtig zu arbeiten, die alle die Höhen der Eltern des Elements muss auch festgelegt werden.

EDIT:

Eine alternative Lösung ist, den Inhalt des td mit einem Behälter div und verwenden absolute Positionierung wickeln die .edit-me Div effektiv hat 100% der Höhe zu gewährleisten.

Hier ist, was die HTML aussehen würde:

<table border="1"> 
    <tr> 
     <td> 
      <div class="container"> 
       <div class="edit-me"></div> 
       Foo 
       <br/> 
       Bar 
      </div> 
     </td> 
     <td>hello</td> 
    </tr> 
</table> 

und die CSS:

.container { 
    position: relative; 
    padding-left: 10px; 
} 

.edit-me { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 

    width:10px; 
    border:1px solid blue; 
    background:red; 
    overflow: auto; 
} 

hoffe, das hilft!