如何使整个 DIV 可点击以转到另一个页面？答案

【问题标题】：How do you make the entire DIV clickable to go to another page?如何使整个 DIV 可点击以转到另一个页面？
【发布时间】：2010-12-02 08:53:32
【问题描述】：

不要将其绑定到 javascript“onclick”。

它需要是一个锚。

我知道我可以将 onclick 绑定到 div 并使其成为 window.location。但是，然后...用户无法通过 CONTROL+单击来打开新选项卡。

我只想要一个填满整个 div 的 <a>。

【问题讨论】：

请详细说明。 DIV 可以有 onclick，所以你做错了。贴一些代码。
HTML5 “href anywhere” 去哪儿了？
你为什么不只使用锚标签。您可以将其设置为不具有链接效果
很多人评论了如何让锚看起来像 DIV。如果这对你来说足够好，我认为display: block 是最重要的属性，因为锚通常是内联元素。

标签： javascript css templates html

【解决方案1】：

尝试将锚点设置为在 DIV 中显示为块并将其高度设置为 100%，如下所示：

<style>
  a { display: block; height: 100% }
  #test { width: 100px; height: 200px; background: red;  }
</style>


<div id='test'><a href='#'>...</a></div>

您可以在此处查看一个工作示例：http://jsbin.com/ujoca3/2/edit

【讨论】：

@Fred display: block; 确保默认情况下子级占据其父级的可用宽度。
一个块元素，默认情况下会展开以填充其父元素。如果宽度 a) 小于 100%，或 b) 浮动元素，您只需要显式设置宽度。在这种情况下，完全不需要设置宽度。

【解决方案2】：

这样做的语义方式是让锚点像 div 一样。因为你不想要容器中的任何其他东西，所以拥有容器是没有意义的。

<style>
    a.fakeDiv, a.fakeDiv:link, a.fakeDiv:hover, a.fakeDiv:active, a.fakeDiv:visited{
       display: block;
       text-decoration: none;
       color: Black;
       cursor: default;
       outline: none;
    }
</style>
<a class="fakeDiv">Content</a>

【讨论】：

【解决方案3】：

一些html：

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

一些CSS

yourdiv { position: relative; }
yourdiv a { position:absolute; left:0;right:0;top:0;bottom:0; }

【讨论】：

也许可以position: relative !important;

【解决方案4】：

<div>
  <a href="somepage.php" style="display: block; height:100%; width: 100%; margin: 0; padding: 0;"></a>
</div>

【讨论】：

这不起作用，因为默认情况下锚是内联元素，您实际上不能以这种方式给它们一个高度。
感谢您的评论！我应该意识到这一点:)