CSSの子の高さの割合

子の高さをその親のパーセンテージとして設定しようとしています。CSSの子の高さの割合

.html, .body {height: 100%; width: 100%} 
     /* test is a child of body to ensure content is aligned in the middle */ 
    .test { 
     width: 90%; 
     height: 100%; 
     position: absolute; 
     left: 5%; 
     top: 0%; 
     margin: -0% 0 0 0%; 
    } 
    /* top banner */ 
    .banner { 
     height: 100px; 
     margin-left: 2%; 
     width: 96%; 
    } 
    /* rest of the content */ 
    .center{ 
     background-color: #FFFFFF; 
     height: 80%; 
     margin-left: 2%; 
     margin-top: 10px; 
     overflow-x: auto; 
     padding: 3px; 
     position: relative; 
     width: 95%; 
    } 
    /* content inside center */ 
    .iwant-event { 
     height: 100%; 
     left: 0; 
     width: 84.5%; 
    }

一つがiwant-イベントクラスは、センターの100％を埋めることを期待：はここに私のセットアップです。クロムでは、私はこの動作を取得します。しかし、Firefoxでは、iwant-eventはセンターの100％を占めません。私のHTMLの簡易版である：

<body> 
    <div class="test"> 
    <div class="banner">Banner stuff here</div> 
    <div class="center"> 
     <div class="iwant-event"></div> 
    </div> 
    </div> 
</body>

私は基本的なCSSとかなり精通していますが、前に多くのブラウザのために開発しようとしたことがありません。助けていただければ幸いです。

出典

2012-03-25 Karthik Gomadam

'margin：-0％0 0 0％;' ?????? – elclanrs

このページは奇形で表示されるのか、厳密に表示されますか？かなりの違いがあります。 –