这对我来说很有用:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

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

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

如果你可以使用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>

您还可以尝试包装一个锚，然后将其高度和宽度与其父相同。这对我来说非常合适。

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</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本身成为一个链接，但是你可以让一个<a>标签作为一个块，与<div>具有相同的行为。

a {
    display: block;
}

然后你可以设置它的宽度和高度。