Html 为什么覆盖div不能接受父'；s尺寸

我正在尝试创建一个按钮。 当鼠标悬停在包装器div（ks wrapper）上时，将显示另一个div（ks overlay）（开始时是隐藏的），并隐藏基于该div（ks按钮）。 按钮也必须没有固定的尺寸

有什么建议吗

HTML

更新 首先，我要感谢你们所有人对我的问题的快速反应。 第二，我想让自己更清楚。。。还要加上几个我能解决的问题

1） 这个按钮将用于响应模板。 按钮是否可能没有固定的高度，覆盖层是否可能遵循此高度

2） 怎样才能做到有过渡和鼠标离开（过渡只在悬停状态下工作）

3） 此按钮位于以下元素的顶部

这是代表问题的关键

---

非常感谢您抽出宝贵的时间

页眉顶部有20像素。。您需要将它们添加到

.ks wrapper.ks overlay{

.ks包装器{
位置：相对位置；
浮动：左；
高度：85px；
宽度：100%；
}
.ks按钮{
位置：绝对位置；
颜色：白色；
宽度：100%；
身高：100%；
}
.ks标题{
边框左上半径：10px；
边框右上角半径：10px；
背景颜色：黄色；
最大高度：20px；
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
颜色：黑色；
填充物：5px；
}
.ks内容{
边框左下半径：10px；
边框右下半径：10px；
背景颜色：灰色；
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
颜色：黑色；
填充物：5px；
身高：100%；
}
.ks包装.ks覆盖{
过渡：可见度0，不透明度0.5，缓进缓出；
位置：绝对位置；
颜色：黄色；
背景颜色：绿色；
宽度：97.5%；
高度：105px；
可见性：隐藏；
不透明度：0；
边界半径：10px；
填充：10px；
溢出：隐藏；
}
.ks包装器：悬停.ks覆盖{
能见度：可见；
不透明度：1；
}

标题
正文
“K”

可能是您所说的

.ks overlay

在特定屏幕

大小

后，会

溢出浏览器宽度

，如果是这样，那是因为添加了

填充

，请使用

css框大小

属性，如下所示

“框大小”属性用于更改默认CSS框模型 用于计算元素的宽度和高度

.ks包装器{
位置：相对位置；
浮动：左；
高度：85px；
宽度：100%；
}
.ks按钮{
位置：绝对位置；
颜色：白色；
宽度：100%；
身高：100%；
}
.ks标题{
边框左上半径：10px；
边框右上角半径：10px；
背景颜色：黄色；
最大高度：20px；
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
颜色：黑色；
填充物：5px；
}
.ks内容{
边框左下半径：10px；
边框右下半径：10px；
背景颜色：灰色；
字体大小：20px；
字体大小：粗体；
文本对齐：居中；
颜色：黑色；
填充物：5px；
身高：100%；
}
.ks包装器>.ks覆盖{
过渡：可见度0，不透明度0.5，缓进缓出；
位置：绝对位置；
颜色：黄色；
背景颜色：绿色；
宽度：100%；
高度：85px；
可见性：隐藏；
不透明度：0；
边界半径：10px；
填充：10px；
溢出：隐藏；
左：0；
框大小：边框框；
}
.ks包装器：悬停.ks覆盖{
能见度：可见；
不透明度：1；
}

标题
正文
“K”

我使用了您的示例代码并将其粘贴进去，您的代码与您的需要有什么不同？谢谢Serge。我的问题是我不想进行求和。我想成为根据文本大小进行相应调整的高度。固定高度仅作为示例。谢谢您！我的问题没有解决。我更新了说明，并且我创建了一个JSFIDLE来显示问题。

<div class="ks-wrapper">
  <div class="ks-button">
    <div class="ks-header">
      Header
    </div>
    <div class="ks-content">
Text
    </div>
  </div>
  <div class="ks-overlay">
    "K"
  </div>
</div>

.ks-wrapper {
  position: relative;
  float: left;
  height: 85px;
  width: 100%;
}
.ks-button {
  position: absolute;
  color: white;
  width: 100%;
  height: 100%;
}
.ks-header{
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  background-color:yellow;
  max-height:20px;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:black;
  padding:5px;
}

.ks-content{
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  background-color:grey;
  font-size:20px;
  font-weight:bold;
  text-align:center;
  color:black;
  padding:5px;
  height:100%;
}

.ks-wrapper .ks-overlay {
  transition: visibility 0s, opacity 0.5s ease-in-out;
  position: absolute;
  color: yellow;
  background-color: green;
  width: 97.5%;
  height: 85px;
  visibility: hidden;
  opacity: 0;
  border-radius:10px;
  padding:10px;
  overflow:hidden;
}

.ks-wrapper:hover .ks-overlay {
  visibility: visible;
  opacity: 1;
}