如果你可以使用bootstrap，一个简单的解决方案是使用bootstrap .stretch -link。

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

示例代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

你可以使用href标签环绕元素，或者你可以使用jquery和使用

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

还有一个没有提到的选项是使用flex。通过对a标记应用flex: 1，它将展开以适应容器。

div { 身高:100 px; 宽度:100 px; 显示:flex; 边框:1px实体; ｝ 一个{ flex: 1; ｝ < div > 链接< a href = " http://google.co.uk " > < / > < / div >

这招对我很管用:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

这将添加一个不可见的元素(span)，它覆盖了整个div，并且在z-index上位于整个div的上方，因此当有人点击该div时，点击基本上会被链接的不可见的“span”层拦截。

注意:如果你已经对其他元素使用了z索引，只要确保这个z索引的值高于你想让它“放在”上面的任何值。

只是有链接在块和增强它与jquery。对于没有javascript的任何人，它都可以100%优雅地降级。在我看来，用html来做这件事并不是最好的解决方案。 例如:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

然后使用jquery使块可点击(通过网页设计师墙):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

然后你所要做的就是向div添加游标样式

    #div_link:hover {cursor: pointer;}

为了加分，只有当javascript通过添加'js_enabled'类到div或body或其他东西来启用时才应用这些样式。

这个选项不需要一个空的gif，就像被点赞最多的答案一样:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

如http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/所提议