为什么我不能放置按钮元素，而父母的高度有百分比？答案

【问题标题】：why I can not put button element while parent have height with percent?为什么我不能放置按钮元素，而父母的高度有百分比？
【发布时间】：2022-01-10 17:10:39
【问题描述】：

我有一个高度为 15% 的 div (height: 15%;)

我无法放置此 div 的设置跨度按钮。如果我使用height: 300px; 效果很好。但是百分比高度不起作用。为什么？

#parent {
  height: 15%;
  position: relative;
}

span { 
  position: absolute;
  bottom: 0;
}

【问题讨论】：

您将父级的高度设置为 15%，但 #parent 的父级是否设置了高度？如果是这样，这应该可以工作。
无法复制请提供mwe

标签： javascript css position

【解决方案1】：

可以使用100vh来填充body的高度；

body {
  height: 100vh;
}

#parent {
  position: relative;
  width: 15%;
  height: 15%;
  background-color: red;
}

span {
  position: absolute;
  color: white;
  text-align: center;
  width: 100%;
  bottom: 0;
}

<div id="parent">
  <span>Hello</span>
</div>

【讨论】：