这是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);
      }
    }
}

需要一点javascript。 但是，你的div是可点击的。

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

为什么不呢?使用<a href="bla"> <div></div> </a>在HTML5中工作良好

这是最简单的方法。

比如说，这是我想要的可点击的div块:

<div class="inner_headL"></div>

所以输入href，如下所示:

<a href="#">
 <div class="inner_headL"></div>
</a>

只需将div块视为普通的html元素，并启用通常的a href标记。 至少在FF上是有效的。

这招对我很管用:

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索引的值高于你想让它“放在”上面的任何值。

我来这里是希望能找到比我更好的解决办法，但这里提供的办法我一个都不喜欢。我想你们有些人误解了这个问题。OP希望使一个充满内容的div表现得像一个链接。其中一个例子是facebook的广告——如果你仔细观察，你会发现它们实际上是适当的标记。

对我来说，不应该的是:javascript(不应该只是一个链接，非常糟糕的SEO/可访问性);无效的HTML。

本质上是这样的:

Build your panel using normal CSS techniques and valid HTML. Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too). Inside that link, put an empty span tag (<span></span>, not <span /> - thanks @Campey) give the panel position:relative apply the following CSS to the empty span: { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('empty.gif'); } It will now cover the panel, and as it's inside an <A> tag, it's a clickable link give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link