将子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的底部，并将该子设置为父级高度的百分比

回答

相关问题