单击任意位置链接

Click anywhere link

本文关键字：链接 位置 任意 单击      更新时间：2023-09-26

我有一个启动页面，希望用户能够单击页面上的任意位置并将其发送到主站点。我已经在 SO 上找到了接近的解决方案，但我的问题是我的启动页面的中心有一个浮动div，因此使用类似 <body onclick="window.location.href='url'"> 的东西仅在单击div时有效，而不是背景上的其他任何地方。这是 HTML：

<html>
<head>
<link rel="stylesheet" href="styles/layout.css" type="text/css" />
</head>
<body>
    <div class="splash">
        <h1>PM & ASSOCIATES</h1>
        <p>Worldwide</p>
    </div>
</body>
</html>

和 CSS：

.splash{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.splash p{
    font-size:12pt;
    font-family:Castellar, Garamond, "Times New Roman", Times, serif;
}
.splash h1{
    font-size:32pt;
    font-family:Castellar, Garamond, "Times New Roman", Times, serif;
}
至少从

历史上看，我在尝试让内容占据 100% 高度时遇到了类似的问题，因为body就像一个div。 它只占用其内容所需的空间。 因此，要解决此问题，您应该能够使您的 html 和正文都 100%：

html { width:100%;height:100%; }
body { width:100%;height:100%; }

这样做应该强制正文标签占据整个窗口。

这是一个相当简单的解决方案，但如果能够修改 html，这可能会起作用：

<html>
    <head>
        <link rel="stylesheet" href="styles/layout.css" type="text/css" />
    </head>
    <body>
        <div class="splash">
            <h1>PM & ASSOCIATES</h1><p>Worldwide</p>
        </div>
        <a href="[insert url here]" class="fullPageLink"></a>
    </body>
</html>

在链接的 href 属性中插入所需的 URL。

然后应该添加这些样式：

body{
    position: relative;
    width: 100%;
    height: 100%;
}
.fullPageLink{
    position: absolute;
    display: block;
    z-index: 10;
    width: 100%;
    height: 100%;
}
相关文章：