Home > Mac > Internet Explorer heightの%値指定時に親要素の高さを反映しない

heightの%値指定時に親要素の高さを反映しない

heightプロパティを%値で指定しても、親要素の高さを反映した結果にならない。body要素内にボックスがない（body要素の子孫がすべて絶対配置の場合など）に発生する可能性がある。

Category: Internet Explorer, Mac
Tag: %指定, height, 親要素

例示

<style type="text/css">
<!--
html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: 2px solid red;
}
body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    border: 2px dashed blue;
}
div.main {
    position: absolute;
    left: 20px;
    top: 20px;
}
-->
</style>

<div class="main">
    .....
</div>

実際の表示については検証ページをご覧ください。html要素とbody要素の幅と高さは100%、マージンとパディングは0に設定しています。また、body要素の子要素はすべて絶対配置です。html要素に設定したボーダーが閲覧領域内全体を囲み、body要素のボーダーがすぐ内側を囲んでいることを確認してください。