如何让块元素自适应绝对定位元素高度？技术求助

这个问题的核心矛盾是绝对定位元素脱离文档流，导致容器无法感知其高度，同时还要保留原生<a>标签的所有行为（包括Ctrl+点击新标签打开）。下面是一个纯CSS的完美解决方案：

核心思路 #

使用CSS Grid布局让链接元素<a>占据整个容器区域，价格元素放在网格的底部位置。这样容器的高度会自动由内容（包括价格）撑开，同时整个容器区域都能触发链接的点击行为，价格元素设置pointer-events: none让点击穿透到下方的链接。

完整代码示例 #

* { box-sizing: border-box; }
.block { 
  background: #3CAEA3; 
  display: inline-grid; /* 切换为Grid布局 */
  position: relative;
}
.link { 
  grid-area: 1/-1; /* 让链接占据网格的所有行列，覆盖整个容器 */
  padding: 20px 20px 0 20px; /* 移除固定的底部padding，由价格元素的高度自动撑开 */
  text-align: center; 
  text-decoration: none;
  color: inherit; /* 可选：继承容器文字颜色 */
}
.title { font-size: 20px; }
.subtitle { font-size: 16px; margin-bottom: 20px; /* 给价格区域留出间距 */ }
.price { 
  text-align: center; 
  padding: 0 20px 20px; /* 给价格添加左右和底部内边距 */
  pointer-events: none; /* 让点击穿透到下方的链接元素 */
}

<div class="block">
  <a class="link" href="https://google.com">
    <div class="title">Coffee table</div>
    <div class="subtitle">Made of wood</div>
  </a>
  <div class="price"> The price is tooooo long: 100€ </div>
</div>

方案优势 #

1. 自适应高度：容器.block的高度会完全匹配价格元素的内容高度，再也不会出现价格溢出的情况
2. 原生链接行为：完全使用原生<a>标签，支持所有默认行为——包括Ctrl+点击新标签打开、右键菜单“在新标签页打开”等
3. 符合约束条件：价格元素独立于链接标签之外，不会产生关联引用问题
4. 纯CSS实现：无需JavaScript，性能更好且更易维护

为什么之前的方案失效？ #

你之前的代码中，价格元素使用position: absolute脱离了文档流，容器.block的高度仅由链接的padding-bottom: 40px决定。当价格内容高度超过20px时，自然会超出容器范围。而Grid布局让容器能感知到所有子元素的高度，完美解决了这个问题。

内容的提问来源于stack exchange，提问作者Jimmy.D