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

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

实际上你现在需要包括JavaScript代码， 请查看本教程。

但有一个棘手的方法来实现这个使用CSS代码 你必须在你的div标签内嵌套一个锚标签，你必须应用这个属性，

display:block;

当你这样做了，它将使整个宽度区域可点击(但在锚标签的高度内)，如果你想覆盖整个div区域，你必须将锚标签的高度设置为div标签的高度，例如:

height:60px;

这将使整个区域可点击，然后你可以应用text-indent:-9999px到锚标签来实现目标。

这是非常棘手和简单的，它只是用CSS代码创建的。

这里有一个例子:http://jsfiddle.net/hbirjand/RG8wW/

这是一个古老的问题，但我想我应该回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……

锚标记是这样工作的-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否成立。如果这就是口头解决方案背后的原因，那么我道歉……

这篇文章是旧的，我知道，但我不得不解决同样的问题，因为简单地写一个普通的链接标签，显示设置为块不能使整个div在IE中可点击。所以解决这个问题要比使用JQuery简单得多。

首先让我们理解为什么会发生这种情况:IE不会使一个空的div可点击，它只使该div/a标签内的文本/图像可点击。

解决方案:用烘焙图像填充div，并隐藏它不让查看器看到。

如何? 你问得好，现在听好了。 将此背景样式添加到a标签

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

现在整个div都可以点击了。这对我来说是最好的方式，因为我在我的图片库中使用它，让用户点击图像的一半左右移动，然后放置一个小图像，只是为了视觉效果。所以对我来说，我使用左右图像作为背景图像!

如果一切都能这么简单……

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

只要跳出框框思考一下;-)

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

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