Question

我正在尝试将子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;
}

Answer 1

使用定位（相对于父项，相对于子项的绝对值）而不是显示属性：

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

<强> jsFiddle example

Answer 2

由于您知道孩子的身高，因此无需绝对定位即可完成此操作。

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

#innerdiv {
   width: 100%; 
   height: 20%;
   margin-top: 80%;
}

如果您的身高以像素为单位，则可以使用：

#innerdiv {
   width: 100%; 
   height: 40px;
   margin-top: calc(100% - 40px);
}

将子div垂直对齐到父div的底部，并将子项设置为父级高度的百分比

2 个答案: