14赞

如何使div 100%的页面(不是屏幕)高度？

作者：mobiledu2402851377 | 2023-08-24 17:27

如何解决《如何使div100%的页面(不是屏幕)高度？》经验，为你挑选了2个好方法。

我正在尝试使用CSS在我的页面上创建一个"灰色"效果,同时在应用程序运行时在前台显示加载框.我通过创建一个100%高度/宽度,半透明的黑色div来实现这一点,它通过javascript打开/关闭其可见性.我觉得这很简单; 但是,当页面内容扩展到屏幕滚动的点时,滚动到页面底部会显示一个不显示灰色的部分.换句话说,div高度的100%似乎适用于浏览器视口大小,而不是实际页面大小.如何使div扩展以覆盖整个页面的内容？我尝试过使用JQuery .css('height','100%')之前切换它的可见性,但这并没有改变任何东西.

这是有问题的div的CSS:

div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

谢谢.

1> mercator..：

如果更改position: absolute为position: fixed它将适用于除IE6之外的所有浏览器.这会将div固定到视口,因此在滚动时它不会移出视图.

您可以$(document).height()在jQuery中使用它以使其在IE6中工作.例如

$('.screenMask').height($(document).height());

这显然会为所有其他浏览器修复它,但如果我可以避免它,我更喜欢不使用JavaScript.你需要为宽度做同样的事情,实际上,万一有水平滚动.

在IE6中也有大量的hacks来进行固定定位工作,但它们往往要么对CSS施加一些其他限制,要么使用JavaScript,所以它们可能不值得这么麻烦.

另外,我假设你只有一个这样的面具,所以我建议使用一个ID而不是一个类.

啊,还记得100%真正意味着100%的好日子吗？

2> Aaron Adams..：

在我被问到这个问题很久之后,我意识到我已经回答了很久,但是在我被这个问题短暂地绊倒之后我就落到了这里,并且目前的答案都没有正确.

这是正确的答案:

body {
    position: relative;
}

而已!现在,您的元素将相对于视口而不是视口定位.

我不打扰position: fixed,因为它的浏览器支持仍然不稳定.iOS 5之前的Safari根本不支持它.

请注意,您的

元素将覆盖边框(框+填充+边框),但不会覆盖其边距.通过在

(例如top: -20px)上设置负位置或通过移除边距来进行补偿.

我还建议设置为height: 100%确保您不会在较短的页面上使用部分屏蔽的视口.

从先前的答案中获得两个有效点.正如Ben Blank所说,你可以丢失width和height声明,而是将所有四个角放置.并且mercator是正确的,你应该使用ID而不是类来表示这样一个重要的单个元素.

这留下了以下推荐的完整CSS:

body {
    position: relative;
    margin: 0;
}

#screenMask {
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

和HTML:

我希望这有助于其他人!

推荐阅读

程序员
与HashMap序列化的NotSerializableException

如何解决《与HashMap序列化的NotSerializableException》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在Akka HTTP中将`text/plain`解组为JSON

如何解决《如何在AkkaHTTP中将`text/plain`解组为JSON》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何解决编译器枚举重新声明冲突

如何解决《如何解决编译器枚举重新声明冲突》经验，为你挑选了1个好方法。 ... [详细]
程序员
根据课程对<div>执行操作

如何解决《根据课程对<div>执行操作》经验，为你挑选了1个好方法。 ... [详细]
程序员
application.cfc的问题显示数据源的消息"变量PRIMARYDATASOURCE未定义"

如何解决《application.cfc的问题显示数据源的消息"变量PRIMARYDATASOURCE未定义"》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用带有HttpComponentsClientHttpRequestFactory和RestTemplate的Proxy

如何解决《使用带有HttpComponentsClientHttpRequestFactory和RestTemplate的Proxy》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何使用header参数发送HTTP请求？

如何解决《如何使用header参数发送HTTP请求？》经验，为你挑选了1个好方法。 ... [详细]
程序员
Laravel限制字符 - PHP

如何解决《Laravel限制字符-PHP》经验，为你挑选了1个好方法。 ... [详细]
程序员
使用`threadDelay`时系统调用量过大

如何解决《使用`threadDelay`时系统调用量过大》经验，为你挑选了0个好方法。 ... [详细]
程序员
如何使用SQL在一个主键中创建2个字段？

如何解决《如何使用SQL在一个主键中创建2个字段？》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何在CreateView的form_valid方法中引发错误

如何解决《如何在CreateView的form_valid方法中引发错误》经验，为你挑选了1个好方法。 ... [详细]
程序员
正则表达式4非连续且没有重复数字

如何解决《正则表达式4非连续且没有重复数字》经验，为你挑选了1个好方法。 ... [详细]
程序员
如何为多个项目设置Pycharm

如何解决《如何为多个项目设置Pycharm》经验，为你挑选了2个好方法。 ... [详细]
程序员
C#表单身份验证.ASPXAUTH Cookie用于SSO

如何解决《C#表单身份验证.ASPXAUTHCookie用于SSO》经验，为你挑选了0个好方法。 ... [详细]
程序员
MVC 6 WebFarm:无法解密防伪令牌

如何解决《MVC6WebFarm:无法解密防伪令牌》经验，为你挑选了1个好方法。 ... [详细]
程序员
通过绑定设置文本时,TextBox删除按钮(小x)不可见

如何解决《通过绑定设置文本时,TextBox删除按钮(小x)不可见》经验，为你挑选了0个好方法。 ... [详细]
程序员
Nvcc的版本与CUDA不同

如何解决《Nvcc的版本与CUDA不同》经验，为你挑选了0个好方法。 ... [详细]
程序员
不引人注目的JQuery验证在弹出的PartialViews中不起作用

如何解决《不引人注目的JQuery验证在弹出的PartialViews中不起作用》经验，为你挑选了1个好方法。 ... [详细]
程序员
无法找到依赖项Microsoft.AspNet.Server.WebListener> = 1.0.0-rc1-final

如何解决《无法找到依赖项Microsoft.AspNet.Server.WebListener>=1.0.0-rc1-final》经验，为你挑选了1个好方法。 ... [详细]
程序员
iOS上的IFrame高度问题(手机游戏)

如何解决《iOS上的IFrame高度问题(手机游戏)》经验，为你挑选了2个好方法。 ... [详细]

mobiledu2402851377

这个屌丝很懒，什么也没留下！

关注作者

Tags | 热门标签

RankList | 热门文章

DevBox开发工具箱 | 专业的在线开发工具网站