如何使用CSS根据页面高度在页面上设置覆盖

发布于 2024-09-12 06:38:23 字数 377 浏览 3 评论 0原文

在我的网站中,我想在禁用 JavaScript 时在页面上方设置覆盖。由于每个页面的高度不同,所以我无法根据页面高度设置覆盖。目前我正在做的是设置一个将最大高度固定为 2000px,如下所示:

.overLay { 背景颜色:#666666; 高度:2000px; 左:0; 位置:绝对; 顶部:0; 宽度:100%; z 索引:1003; 不透明度:0.5; }

但这不是我想要的。因为有些页面的高度比提到的覆盖高度小得多,而有些页面的高度更高,所以在这种情况下覆盖不太有效。我想根据页面高度设置覆盖高度。可以吗?告诉我如何在不使用 JavaScript 的情况下实现这一目标?

In my web site I want to set a overlay above the page when JavaScript is disabled.Since height of every page is different so I am unable to set the overlay based on the page height.Currently what I am doing is that I am setting a fix maximum height of 2000px as follows:

.overLay
{
background-color:#666666;
height:2000px;
left:0;
position:absolute;
top:0;
width:100%;
z-index:1003;
opacity: 0.5;
}

But this not what I want.Because some pages have very less height than the mentioned overlay height and some pages have more, so overlay is not to much effective this case.I want to set overlay height according to the page height.Can any one tell me how I can achieve this with out using JavaScript?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

走过海棠暮 2024-09-19 06:38:23
body,html { height:100%; width:100%; padding:0; margin:0; }
.overlay  { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; }

这应该有效。覆盖层应该是

body,html { height:100%; width:100%; padding:0; margin:0; }
.overlay  { position:absolute; top:0px; left:0px; z-index:999; height:100%; width:100%; background:#c1c1c1; }

This should work. The overlay should be a <div>.

千仐 2024-09-19 06:38:23

这可能会产生其他副作用,具体取决于您的内容或其他内容...但是您也许可以使用

body {
  overflow:hidden;
}

但这当然意味着如果内容比页面长,页面就不会滚动...但它确实会阻止某些页面变成仅因为覆盖而更长

This may well have other side effects depending on your content or whatever...but you could perhaps use

body {
  overflow:hidden;
}

But that of course means the page wouldn't scroll if the content was longer than the page...but it does stop some pages becoming much longer only because of the overlay

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文