Reactヘッダーの計算

Question

ヘッダーコンポーネントとその下にコンテンツコンポーネントがあるページがあります。 （含まれているdivに100％の高さがありません）

マップの上部（ヘッダーの下）から画面の下部にマップを開きたいとします。 （すべてのスペースを使用）フレックスなし、コンテンツコンポーネント内。

私は考えています。ヘッダーの高さを得る（Xと言う）のです。 0、右：0、下：0（Airbnbもやっているのを見ました）

私は質問したかったので、どのようにヘッダーの高さをコンテンツコンポーネント？あなたはもっと良い提案をしていますか？フレックスが不要である場合テーブル：

Answer 1

あなたは、ディスプレイを使用することができます

html, body { 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
} 
 
body { 
 
    display:table; 
 
} 
 
.row { 
 
    display:table-row; 
 
    height:100%; 
 
} 
 
header.row { 
 
    background:green; 
 
    height:0; 
 
} 
 
main.row { 
 
    position:relative; 
 
} 
 
main.row div.inner { 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    background:lightblue 
 
} 
 
/* test height : 100% */ 
 
b { 
 
    float:left; 
 
    height:100%; 
 
    background:gray; 
 
    margin-left:1em; 
 
}

<header class="row"> 
 
    <div> here comes header stuff <br/>of any height 
 
    </div> 
 
</header> 
 
<main class="row"> 
 
    <div class="inner"> 
 
    <b> test to cover height</b> 
 
    </div> 
 
</main>