子要素の幅・高さがパーセントの場合の算出方法

親要素のwidth,heightが明示されている場合

子要素の幅は親要素のwidthに対する%で指定されます。
子要素の高さは親要素のheightに対する%で指定されます。

ソース

<div class="parent" style="width: 1000px; height: 1000px;">
    <div class="child" style="height:50%; width:50%"></div>
</div>

結果

.parent width  : 1000px
        height : 1000px
.child  width  : 500px
        height : 500px

親要素のwidth,heightが明示されていない場合（autoまたは無指定）の場合

widthが「auto」の場合は値が「画面幅」になります。
heightが「auto」の場合は値が「0」になります。

ソース

<div class="parent">
    <div class="child" style="height:50%; width:50%"></div>
</div>

結果

.parent width  : 画面幅
        height : 0
.child  width  : 画面幅 × 50%
        height : 0

親要素のwidth,height指定せず、min-width,min-heightを指定した場合

min-widthの値は子要素に反映されます。
min-heightの値は子要素に反映されませんので、親要素の値が「auto」の場合と同じ挙動となります。

ソース

<div class="parent" style="min-width: 1000px; min-height: 1000px;">
    <div class="child" style="height:50%; width:50%"></div>
</div>

結果

.parent width  : 画面幅と1000pxで大きいほう
        height : 1000px
.child  width  : 画面幅と1000pxで大きいほう × 50%
        height : 0