如何使<div>总是全屏?

不管内容如何。

有可能做到吗?

当前回答

我用这个简单的方法解决了我的问题。此外，无论页面滚动多长时间，div始终保持全屏。

#fullScreenDiv {
  position: fixed;
  top: 0;
  bottom: 0;      
  left: 0; /*If width: 100%, you don't need it*/
  right: 0; /*If width: 100%, you don't need it*/
}

希望这能有所帮助。

2022-04-23 00:18:49

其他回答

这应该工作，虽然我没有IE测试。

<html>
<head>
    <title>Hellomoto</title>
    <style type="text/css">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

2009-11-12 08:48:01

使用Fullscreen API和:Fullscreen伪选择器，任何元素都可以切换全屏模式。

注意:

Stackoverflow不允许全屏模式(document.fullscreenEnabled)，因此代码段不能在这里演示requestFullscreen()方法。

我认识到这个问题不需要jQuery。我正在使用一个库来简化事件绑定。当然，香草JS也可以代替。

引用:

https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API https://developer.mozilla.org/en-US/docs/Web/CSS/:fullscreen

2022-03-31 12:28:08

不幸的是，CSS中的height属性并不像它应该的那样可靠。因此，必须使用Javascript来将所讨论元素的height样式设置为用户视口的高度。是的，这可以在没有绝对定位的情况下完成……

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

2009-11-12 02:34:23

我发现最优雅的方法是像下面这样，这里最技巧的是使div的位置:固定。

.mask { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: 0; box-sizing: border-box; width: 100%; height: 100%; object-fit: contain; } <html> <head> <title>Test</title> </head> <body> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <h1>Whatever it takes</h1> <div class="mask"></div> </body> </html>

2016-05-18 03:13:52

这是我创建一个全屏div的解决方案，使用纯css。它在滚动时显示一个持久的全屏div。如果页面内容适合屏幕，页面就不会显示滚动条。

在IE9+， Firefox 13+， Chrome 21+测试

<！doctype html > < html > < >头 <meta charset="utf-8" /> <title>全屏Div </title> . <时尚> .overlay { 位置:固定; 宽度:100%; 高度:100%; 左:0; 上图:0; 背景:rgba(51岁,51,51岁,0.7); z - index: 10; ｝ > < /风格 > < /头 <身体> <div class='overlay'>可选文本 <p>这个段落位于覆盖层的下面，因此不能被选择:) 身体< / > < / html >

2012-08-16 07:32:26

如何使<div>总是全屏?

推荐文章

最新文章

标签