將子div垂直對齊到父div的底部，並將該子設置爲父級高度的百分比

我試圖垂直對齊父子div底部的子div，並將其設置爲父母身高的百分比。將子div垂直對齊到父div的底部，並將該子設置爲父級高度的百分比

但是，高度：20％的孩子的財產似乎被忽略，並且div延伸佔據了整個100％。

最終目標是將全屏幕標題頁照片作爲文章的介紹，沿照片底部運行的半透明欄將具有文章標題。我使用百分比來使其成爲任何尺寸屏幕的響應式設計。

HTML：

<body> 
    <div id="outerdiv"> 
     <div id="innerdiv"> 
     test 
     </div> 
    </div> 
</body>

CSS：

html, body { 
height: 100%; 
width: 100%; 
} 

#outerdiv { 
height: 100%; 
width: 100%; 
display: table; 
}  

#innerdiv { 
width: 100%; 
height: 20%; 
background-color: red; 
display: table-cell; 
vertical-align: bottom; 
}

來源

2014-02-21 Jason Davis

使用定位（相對父，絕對的孩子），而不是顯示屬性：

#outerdiv { 
    height: 100%; 
    width: 100%; 
    position:relative; 
} 
#innerdiv { 
    width: 100%; 
    height: 20%; 
    background-color: red; 
    position:absolute; 
    bottom:0; 
}

jsFiddle example

來源

2014-02-21 17:14:06 j08691

'＃innerdiv'的位置也可以由'relative'用'頂部：80％'設置。 – Jasper

這很好，謝謝。 –

將子div垂直對齊到父div的底部，並將該子設置爲父級高度的百分比

回答

相關問題