首页 文章

如何使div 100％的页面（不是屏幕）高度？

提问于
浏览 次
51

我正在尝试使用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;
}

谢谢 .

html css

5 回答

  • 1

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

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

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

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

    还有plenty of hacks around to make fixed positioning work in IE6，但他们往往要么对CSS施加一些其他限制，要么使用JavaScript，所以他们可能不值得这么麻烦 .

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

    回复于
  • 2

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

    这是正确的答案：

    body {
    position: relative;
}

    而已！现在，您的元素将相对于 <body> 而不是视口定位 .

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

    请注意， <div> 元素将涵盖 <body> 's border-box (box + padding + border), but it won' t覆盖其边距 . 通过在 <div> （例如 top: -20px ）上设置负位置或通过删除 <body> 的边距来进行补偿 .

    我还建议将 <body> 设置为 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：

    <body>
    <div id="screenMask"></div>
</body>

    我希望这有助于其他人！

    回复于
  • 53
    div.screenMask
{
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    z-index: 1000;
    background-color: #000000;
    opacity: 0.7;
    filter: alpha(opacity=70);
    visibility: hidden;
}

    通过设置 top ， bottom ， left 和 right 的全部，将自动计算高度和宽度 . 如果 screenMask 是 <body> 元素的直接子元素并且标准框模型生效（即未触发怪癖模式），则这将覆盖整个页面 .

    回复于
  • 3

    如果你想要具有叠加效果的弹出窗口，那么你可以使用这些步骤..

    <style>
.overlay{
 background:#000;
 opacity:0.5;
 position:fixed;
 z-index:1;
 width:100%;
 height:100%;
}
.popup{
 width:500px;
 margin:auto;
 position:fixed;
 z-index:2;
 height:300px;
}
</style>
<div class="overlay"></div>
<div class="popup">
      Hello everyone
</div>
    回复于
  • 17

    如果你使用jQuery在弹出窗口之前设置高度我猜是可以添加一些更多的javascript :)

    你可以将div的高度设置为document.body的scrollHeight - 这样它应该覆盖整个body . 你需要添加一些额外的技巧，以确保它保持覆盖身体，以防下面的东西决定增长 .

    回复于

相关问题