如何让<a>标签作为div的可点击背景并适配父容器大小

核心方案：利用绝对定位让背景占满父容器 #

通过给父容器设置相对定位，将.clickable的<a>标签绝对定位覆盖整个容器，同时保证内部的<a>标签能正常触发点击（不会被背景链接拦截）。

修改后的CSS #

/* 给父容器.row添加相对定位，作为绝对定位的基准 */
.row {
    position: relative;
}

.clickable {
    background-color: $color-accent-white;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* 让背景链接在内容下方 */
    cursor: pointer;
}

/* 确保内部内容在背景链接上方，内部<a>能正常点击 */
.col-12, .col-md-4, .col-md-8 {
    position: relative;
    z-index: 1;
}

修改后的HTML #

<events>
    {{#each events}}
            <div>
                <section>
                    <div class="row">
                        <a class="clickable" href="{{ link }}" {{#if link_target}}target="{{ link_target }}"{{/if}} data-show-until="{{ show_until }}"></a>
                        <div class="col-12 col-md-4">
                            {{> [content/content_picture]
                                large=image.large
                                alt=image.alt
                                link=null
                            }}
                        </div>
                        <div class="col-12 col-md-8">
                            <p class="mb-0">
                                <small>
                                    {{ subline }}
                                </small>
                            </p>
                            <p class="h3">
                                {{ headline }}
                            </p>
                            {{{ text }}}
                        </div>
                    </div>
                </section>
            </div>
    {{/each}}
</events>

关键说明 #

• position: relative给.row：让绝对定位的.clickable以这个容器为边界，不会超出到父级其他区域。
• 绝对定位的.clickable：通过top:0; left:0; right:0; bottom:0自动填充整个.row的空间，替代之前破坏布局的padding:100%。
• z-index层级：背景链接设为z-index:0，内容容器设为z-index:1，这样内部的<a>标签点击时会优先触发自身的链接，而不是背景的容器链接。
• 光标设置：给.clickable加cursor: pointer，让用户能直观感知到区域可点击。

内容的提问来源于stack exchange，提问作者TraktorJack