絕對定位塊的百分比高度

這是一個受好奇心而非實際問題驅動的問題。我試圖更好地理解CSS。絕對定位塊的百分比高度

百分比高度（和寬度）應該是相對於包含塊（see here）。

絕對定位塊的包含塊是「定位」的最近祖先（即絕對，相對或固定 - see here）。

，所以我期望在這個例子中，內div來跨越整個可用高度：

<div class="full-height"> 

    <div> 
    <div id="main-block"> 
    x 
    </div> 
    </div> 

</div> 

html, body, .full-height { 
    height: 100%; 
    position: relative; 
}

這個CSS：

#main-block { 
    height: 100%; 
    background-color: red; 
}

或只採取this fiddle。

那麼這裏發生了什麼？

來源

2017-08-13 John

你還沒有絕對定位你的主要塊。做到這一點，它將採取全高。

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
    position:absolute 
 
}

<div class="full-height"> 
 

 
     <div> 
 
     <div id="main-block"> 
 
     x 
 
     </div> 
 
     </div> 
 

 
    </div>

來源

2017-08-13 23:25:12 Alohci

嗯，這很尷尬... – John

問題在於你有一個額外的<div>，它是#main-block的父級，它沒有設置高度。考慮到你沒有指定100%的高度爲這個元素，它只使用默認高度高度。對於<div>，這是0px。

#main-block試圖佔用此額外<div>（而不是其父母）的高度100%。考慮到#main-block包含內容（x），它會自動擴展以允許顯示內容。

刪除此額外<div>展示一整頁的紅色背景，正如預期：

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
}

<div class="full-height"> 
 
    <div id="main-block"> 
 
    x 
 
    </div> 
 
</div>

相反，保持這個額外的父<div>並給它的100%將高度也給你一個全高的紅色背景。請注意，這隻會給你儘可能多的寬度作爲#main-block內容本身;如果你希望它是全寬，你需要在除指定width到height：

html, body, .full-height { 
 
    height: 100%; 
 
    position: relative; 
 
} 
 

 
#main-block { 
 
    height: 100%; 
 
    background-color: red; 
 
} 
 

 
.full-height > div { 
 
    position: absolute; 
 
    height: 100%; 
 
}

<div class="full-height"> 
 
    <div> 
 
    <div id="main-block"> 
 
     x 
 
    </div> 
 
    </div> 
 
</div>

而且也注意到了<div>的默認位置static ，而不是absolute。

希望這會有所幫助！ :)

來源

2017-08-13 23:17:14

絕對定位塊的百分比高度

回答

相關問題