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

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

这是BBC网站和《卫报》上使用的最好的表达方式:

我在这里找到了技巧: http://codepen.io/IschaGast/pen/Qjxpxo

这是HTML

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

这里是CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

不确定这是否有效，但它为我工作。

代码:

< div风格= '位置:相对;background - color: # 000000;宽度:600 px;高度:30 px;边界:固体;“> <p style='display:inline;color:#ffffff;float:left; <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a> . < / div >

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

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

这个例子很适合我:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

将你的div包含在一个锚标记<a href></a>中:

    <a href="">
      <div>anything goes here will turn into a link</div>
    </a>