【问题标题】: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>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2012-05-09
    • 2016-09-11
    • 2018-05-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-08
    相关资源
    最近更新 更多