如何使用CSS根据页面高度在页面上设置覆盖
在我的网站中,我想在禁用 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这应该有效。覆盖层应该是
。
This should work. The overlay should be a
<div>
.这可能会产生其他副作用,具体取决于您的内容或其他内容...但是您也许可以使用
但这当然意味着如果内容比页面长,页面就不会滚动...但它确实会阻止某些页面变成仅因为覆盖而更长
This may well have other side effects depending on your content or whatever...but you could perhaps use
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