效果要求：子元素内容是标题+文字，高度不固定，只显示固定高度的标题部分，hover时显示全部

如果设置bottom: -100%;,会将其设置为父级大小的100%。子元素高度不固定这样就无法显示标题部分

可以将元素设置为bottom 0,这样就会在父级的底部，用translateY控制子元素的显示

less

position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(calc(~'100% - 50px'));

css

position: absolute;
bottom: 0;
left: 0;
right: 0;
transform: translateY(calc(100% - 50px));