我有一个启动页面,希望用户能够单击页面上的任意位置并将其发送到主站点。我已经在 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%;
}